学习过程中将笔记跟大家分享，希望对大家也有所帮助，共同成长进步~
如果大家喜欢，可以点赞或留言~~，谢谢大家~
第一种米字型布局代码分享，思路首先分成四个大三角形上下左右，然后在在每个大的三角形分成两个三角形，颜色自己可以调整，代码如下：
<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>.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;
}效果图如下：
第二种米字型布局代码分享代码如下：
<div class="mbigBox">
<div class="link-top"></div>
<div class="link-right"></div>
<div class="line-div"></div>
<div class="line-div1"></div>
</div>.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米字型代码分享代码如下：
<canvas id='canvas'></canvas>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();
},效果图如下:
