多种米字型布局方式，字型布局分享

%ignore_pre_1%

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

—-想了解更多的css相关样式处理怎么解决关注<编程笔记>