多種米字型布局方式

番茄西紅柿發布于2019-04-23 11:54 / 3211人閱讀

摘要：第一種米字型布局代碼分享，思路首先分成四個大三角形上下左右，然后在在每個大的三角形分成兩個三角形，顏色自己可以調整代碼分享向上的三角形向下的三角形向左的三角形向右的三角形代碼向下向左向右

第一種米字型布局代碼分享，思路首先分成四個大三角形上下左右，然后在在每個大的三角形分成兩個三角形，顏色自己可以調整
html代碼分享
<div class="bigBox">
        <div class="rackBox">
            
            <div class="triangle_border_up">
                <div class="triangle_border_nw1">div>
                <div class="triangle_border_nw2">div>
            div>
            
            <div class="triangle_border_down">
                <div class="triangle_border_nw3">div>
                <div class="triangle_border_nw4">div>
            div>
            
            <div class="triangle_border_left">
                <div class="triangle_border_nw5">div>
                <div class="triangle_border_nw6">div>
            div>
            
            <div class="triangle_border_right">
                <div class="triangle_border_nw7">div>
                <div class="triangle_border_nw8">div>
            div>
        div>
        
    div>

css代碼
.bigBox {
    width: 500px;
    height: 500px;
    background: wheat;
}
.rackBox {
    width: 120px;
    height: 120px;
    float: left;
    position: relative;
    overflow: hidden;
}
.triangle_border_up{
    width:0;
    height:0;
    border-width:0 60px 60px;
    border-style:solid;
    border-color:transparent transparent #fc0;
    position:relative;
    transform: rotate(180deg);
}
/*向下*/
.triangle_border_down{
    width:0;
    height:0;
    border-width:60px 60px 0;
    border-style:solid;
    border-color:red transparent transparent;
    position:relative;
    transform: rotate(180deg);
}
/*向左*/
.triangle_border_left{
    width:0;
    height:0;
    border-width:60px 60px 60px 0;
    border-style:solid;
    border-color:transparent greenyellow transparent transparent;
    position:relative;
    transform: rotate(180deg);
    top: -120px;
}
/*向右*/
.triangle_border_right{
    width:0;
    height:0;
    border-width:60px 0 60px 60px;
    border-style:solid;
    border-color:transparent transparent transparent red;
    position:relative;
    transform: rotate(180deg);
    top: -240px;
    left: 60px;
}
.triangle_border_nw1{
    width:0;
    height:0;
    border-width:0 0 60px 60px;
    border-style:solid;
    border-color:transparent transparent transparent red;
    position:absolute;
    transform: rotate(270deg);
}
.triangle_border_nw2{
    width:0;
    height:0;
    border-width:0 0 60px 60px;
    border-style:solid;
    border-color:transparent transparent transparent pink;
    position:absolute;
    transform: rotate(180deg);
    left: -60px;
}
.triangle_border_nw3{
    width:0;
    height:0;
    border-width:0 0 60px 60px;
    border-style:solid;
    border-color:transparent transparent transparent pink;
    position:absolute;
    transform: rotate(0deg);
    top: -60px;
}
.triangle_border_nw4{
    width:0;
    height:0;
    border-width:0 0 60px 60px;
    border-style:solid;
    border-color:transparent transparent transparent red;
    position:absolute;
    transform: rotate(90deg);
    top: -60px;
    left: -60px;
}
.triangle_border_nw5{
    width:0;
    height:0;
    border-width:0 0 60px 60px;
    border-style:solid;
    border-color:transparent transparent transparent pink;
    position:absolute;
    transform: rotate(90deg);
}
.triangle_border_nw6{
    width:0;
    height:0;
    border-width:0 0 60px 60px;
    border-style:solid;
    border-color:transparent transparent transparent red;
    position:absolute;
    transform: rotate(180deg);
     top: -60px; 
}
.triangle_border_nw7{
    width:0;
    height:0;
    border-width:0 0 60px 60px;
    border-style:solid;
    border-color:transparent transparent transparent red;
    position:absolute;
    transform: rotate(0deg);
    left: -60px;
}
.triangle_border_nw8{
    width:0;
    height:0;
    border-width:0 0 60px 60px;
    border-style:solid;
    border-color:transparent transparent transparent pink;
    position:absolute;
    transform: rotate(270deg);
    top: -60px;
    left: -60px;
}

第一種米字型布局代碼分享，思路首先分成四個大三角形上下左右，然后在在每個大的三角形分成兩個三角形，顏色自己可以調整

第二種米字型布局代碼分享

html代碼如下

<div class="mbigBox">
    <div class="link-top">div>
    <div class="link-right">div>
    <div class="line-div">div>
    <div class="line-div1">div>
div>

css代碼如下

.mbigBox {
    width: 202px;
    height: 202px;
    border: 1px solid gainsboro;
    float: left;
    position: relative;
    overflow: hidden;
}
.clear {
  clear: both;
  }
.link-top {
    width: 100%;
    border-top: solid #dcdcdc 1px;
    position: absolute;
    top: 50%;
}
 
/*畫一條再右邊的豎線*/
.link-right {
    height: 100%;
    border-right: solid #dcdcdc 1px;
    position: absolute;
    left: 50%;
}
.line-div {
    width: 284px;
    height: 118px;
    border-bottom: 1px solid #dcdcdc;
    /* border: 2px solid #000000; */
    position: absolute;
    text-align: center;
    /*margin-left: 50%;
    margin-top: -10rem;*/
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(Rotation=0.45);
}
.line-div1 {
    width: 484px;
    height: 204px;
    border-bottom: 1px solid #dcdcdc;
    /* border: 2px solid #000000; */
    position: absolute;
    text-align: center;
    /*margin-left: 50%;
    margin-top: -10rem;*/
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(Rotation=0.45);
}

效果圖如下

第三種canvas米字型代碼分享

html代碼

<canvas id=canvas>canvas>

js代碼如下
drawcanvas(){
        this.canvas = document.getElementById(canvas);
        this.ctx = canvas.getContext(2d);
    this.canvas.width = 300;
    this.canvas.height = this.canvas.width;
    var color ="black";
    //畫出田字格
    this.drawGrid();
},
drawGrid(){   //畫出田字格
    this.ctx.save();
    this.ctx.strokeStyle = "rgb(230,11,9)";
    this.ctx.beginPath();
    this.ctx.moveTo(3,3);
    this.ctx.lineTo(canvas.width - 3,3);
    this.ctx.lineTo(canvas.width - 3,canvas.height -3);
    this.ctx.lineTo(3,canvas.height -3);
    this.ctx.closePath();
    
    this.ctx.lineWidth = 6;
    this.ctx.stroke();
    
    this.ctx.beginPath();
    this.ctx.moveTo(0,0);
    this.ctx.lineTo(canvas.width,canvas.height);
    
    this.ctx.moveTo(canvas.width,0);
    this.ctx.lineTo(0,canvas.height);
    
    this.ctx.moveTo(canvas.width/2,0);
    this.ctx.lineTo(canvas.width/2,canvas.height);
    
    this.ctx.moveTo(0,canvas.width/2);
    this.ctx.lineTo(canvas.width,canvas.height/2);
    this.ctx.lineWidth=1;
    this.ctx.stroke();
    this.ctx.restore();
},

效果圖如下

學習并記錄知識，希望對大家也有所幫助 O(∩_∩)O

GPU云服務器云服務器 android布局方式字型多種格式多種語言

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1323.html

結合CSS3的布局新特征談談常見布局方法

摘要：案例圖片來自騰訊年的一道前段筆試題，有興趣的同學可以去看一下。騰訊前端面試稿布局布局指頁面布局像一張宣傳海報，以一張精美圖片作為頁面的設計中心。寫在前面最近看到《圖解CSS3》的布局部分，結合自己以前閱讀過的一些布局方面的知識，這里進行一次基于CSS2、3的各種布局的方法總結。常見的頁面布局在拿到設計稿時，作為一個前端人員，我們首先會做的應該是為設計圖大致地劃分區域，然后選擇一...

xuhong 2019-08-28 18:31 評論0 收藏0
結合CSS3的布局新特征談談常見布局方法

摘要：案例圖片來自騰訊年的一道前段筆試題，有興趣的同學可以去看一下。騰訊前端面試稿布局布局指頁面布局像一張宣傳海報，以一張精美圖片作為頁面的設計中心。寫在前面最近看到《圖解CSS3》的布局部分，結合自己以前閱讀過的一些布局方面的知識，這里進行一次基于CSS2、3的各種布局的方法總結。常見的頁面布局在拿到設計稿時，作為一個前端人員，我們首先會做的應該是為設計圖大致地劃分區域，然后選擇一...

cnTomato 2019-08-01 15:01 評論0 收藏0
物聯網、云計算、大數據等技術正廣泛應用

摘要：當前，物聯網云計算大數據等新技術滲透到城市生活的各個領域，城市正在被各種智慧應用改變。對此，關宏明表示，從城市云切入，精準卡位區域信息化機遇，可以搶占智慧城市政府大數據產業制高點。　　參觀者在某展會上觀看一個智慧城市模型。（資料圖片）　　華三通信技術有限公司部分云計算相關產品展示。　　當前，物聯網、云計算、大數據等新技術滲透到城市生活的各個領域，城市正在被各種智慧應用改變。　　可以看到，互...

mindwind 2019-04-28 19:28 評論0 收藏0
移動端h5頁面適配

摘要：一直對頁面充滿崇敬揣著忐忑的心開始了我的之旅。但實際情況卻并非如此理由如上但在移動設備上，必須弄明白這點。其他品牌的移動設備也是這個道理。一直對h5頁面充滿崇敬,揣著忐忑的心開始了我的h5之旅。才發現直接照抄網上的方案是很容易,但是想真的了解內部的原理,這就給我了一個下馬威了.通過在網上各種找資料,才將各種概念以及原理了解清楚.故寫下這篇文章用于積累知識,如有問題,歡迎指正! 在開始...

張率功 2019-08-22 18:18 評論0 收藏0