多种⽶字型布局⽅式
第⼀种⽶字型布局代码分享，思路⾸先分成四个⼤三⾓形上下左右，然后在在每个⼤的三⾓形分成两个三⾓形，颜⾊⾃⼰可以调整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);
}
absolute relative.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 = ElementById('canvas');
< = Context('2d');
this.canvas.width = 300;
this.canvas.height = this.canvas.width;
var color ="black";
//画出⽥字格
this.drawGrid();
},
drawGrid(){  //画出⽥字格
},
效果图如下
学习并记录知识，希望对⼤家也有所帮助 O(∩_∩)O

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。