当前位置：移动技术网 > IT编程>网页制作>CSS > 多种米字型布局方式

多种米字型布局方式

2019年01月16日 | 移动技术网IT编程 | 我要评论

第一种米字型布局代码分享，思路首先分成四个大三角形上下左右，然后在在每个大的三角形分成两个三角形，颜色自己可以调整
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

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

CSS 控制动画播放与暂停的小技巧(非常实用)

今天要介绍一种很简单的使用 css 控制动画播放与暂停的小技巧。使用好了，可以在很多实际场景得以运用。我们先来看个例子，本例子是我在闲逛 codepen 时看... [阅读全文]
css3 flex布局实现平均分配元素的示例代码

本文主要介绍了css3 flex布局实现平均分配元素，给自己留个笔记，也分享给大家，具体如下：例子一：<!doctype html><html... [阅读全文]
CSS字体、文本、列表属性详细介绍

1.字体属性　　color，规定文本的颜色，如 div{color:red;}　　font-style，规定文本显示方式，如 p.normal {font-st... [阅读全文]
深入理解CSS background-blend-mode的作用机制

本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。一、可能都知道的首先，讲两点大家可能都知道的知识点：1.background-... [阅读全文]
CSS中的四种定位区别详解

我们都知道，前端开发里面的css中常用的定位方式有普通定位，相对定位，绝对定位、固定定位定位这四种。但是很多零基础的前端小白都不知道这4种定位方式都有什么作用和... [阅读全文]
解决移动端1px边框最好的方法(推荐)

在移动端开发时，经常会遇到在视网膜屏幕中元素边框变粗的问题。本文将带你探讨边框变粗问题的产生原因及介绍目前市面上最好的解决方法。1px 边框问题的由来苹果 ip... [阅读全文]
让CSS flex布局最后一行列表左对齐的N种方法(小结)

引用分享给大家，如果你想进行修改进入链接点到对应的图片生成的链接进入，方可修改。问题描述//html<div class="container&... [阅读全文]
CSS 列表模型之marker标记的使用

本文主要对::master伪元素、list-item下的list-style-image、list-style-type样式属性进行介绍，并介绍了在实际中如何使... [阅读全文]
cubic-bezier处理下拉和回弹

/** * 下拉和回弹 * 1.关闭bounce避免ios端下拉冲突 * 2.由于touchm... [阅读全文]
服装面料加工中英双语网站搭建模板

服装面料定制加工公司中英双语网站搭建模板，首页界面干净高端，服装设计和品牌服饰通用模板，排版整齐干净，使用最新织... [阅读全文]

网友评论


验证码：

多种米字型布局方式

2019年01月16日 | 移动技术网IT编程 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论