多种米字型布局方式

第一种米字型布局代码分享，思路首先分成四个大三角形上下左右，然后在在每个大的三角形分成两个三角形，颜色自己可以调整
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 tr财经法规与会计职业道德试题及答案ansparent 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; */    positio小牛血去蛋白提取物n: 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";    //画出田字格    th西安到武汉is.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.clopath();        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