AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

多种米字型布局方式

2022-06-07 149
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 多种米字型布局方式
学习过程中将笔记跟大家分享，希望对大家也有所帮助，共同成长进步~
如果大家喜欢，可以点赞或留言 ~~，谢谢大家~

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

<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;
}

效果图如下：

image.png

第二种米字型布局代码分享代码如下：

<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);
}

效果图如下:

image.png

第三种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();
},

效果图如下:

image.png

文章标签：
前端开发
vaelcy
目录
相关文章
米果粒
|
3月前
|
Shell
球从100米高度自由落下
这段代码计算了一个球从100米高度自由落下并在每次触地后反弹至原高度一半的过程，直至第10次落地时总共经过的距离以及第10次反弹的高度。使用循环结构累加每次落下与反弹的距离，并更新反弹高度。最终输出总距离和第10次反弹的高度。
米果粒
49 5
游客fz577umxdejsg
|
4月前
|
前端开发
背景滑动，动感加倍：CSS动画对角线效果全解析！
背景滑动，动感加倍：CSS动画对角线效果全解析！
游客fz577umxdejsg
39 0
破浪前进
一个球从 1000 米高空掉落，每次弹起高度是上一次的 50% ，弹几次后，高度低于 1 米
一个球从 1000 米高空掉落，每次弹起高度是上一次的 50% ，弹几次后，高度低于 1 米
破浪前进
70 0
仍在探索未知中
|
7月前
VS2019显示器颜色调整成护眼模式的颜色
工具 -> 选项 -> 环境 -> 字体和颜色，显示项为“纯文本”，设置项背景色：色调=85，饱和度=123，亮度=205，或者 rgb为199，238，206
仍在探索未知中
86 0
啊理八八
|
UED 容器
如何实现侧边两栏宽度固定，中间栏宽度自适应的布局？——双飞翼布局、圣杯（Holy Grails）布局
如何实现侧边两栏宽度固定，中间栏宽度自适应的布局？——双飞翼布局、圣杯（Holy Grails）布局
啊理八八
84 0
前端歌谣
|
前端开发
前端项目实战叁-兼容条形打印机移动端单位用毫米设定(div版)
前端项目实战叁-兼容条形打印机移动端单位用毫米设定(div版)
前端歌谣
72 0
破浪前进
封装一个函数，山峰 高度不固定、纸张厚度不固定，计算折叠几次后超过山峰
封装一个函数，山峰 高度不固定、纸张厚度不固定，计算折叠几次后超过山峰
破浪前进
53 0
茶底世界之下
效果处理（内阴影、外阴影、外发光、内发光、投影）
效果处理（内阴影、外阴影、外发光、内发光、投影）
茶底世界之下
377 0
效果处理（内阴影、外阴影、外发光、内发光、投影）
freesan44
LeetCode 1637. 两点之间不包含任何点的最宽垂直面积
给你 n 个二维平面上的点 points ，其中 points[i] = [xi, yi] ，请你返回两点之间内部不包含任何点的 最宽垂直面积 的宽度。
freesan44
91 0
游客m3nggewvn34ow
滚珠丝杆双圆弧螺纹宏程序参考
滚珠丝杆双圆弧螺纹宏程序参考
游客m3nggewvn34ow
143 0
滚珠丝杆双圆弧螺纹宏程序参考