多种米字型布局方式

简介: 多种米字型布局方式
学习过程中将笔记跟大家分享,希望对大家也有所帮助,共同成长进步~
如果大家喜欢,可以点赞或留言 ~~,谢谢大家~

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

<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

目录
相关文章
|
存储 数据可视化 Serverless
使用蒙特卡罗模拟的投资组合优化
在金融市场中,优化投资组合对于实现风险与回报之间的预期平衡至关重要。蒙特卡罗模拟提供了一个强大的工具来评估不同的资产配置策略及其在不确定市场条件下的潜在结果。
649 1
|
域名解析 监控 算法
阿里云拨测:主动探测Web应用质量,助力提升用户体验
阿里云拨测是一种针对互联网应用(Web页面、网络链路等)进行应用性能和用户体验监测的服务,无需嵌码即可为云上用户提供开箱即用的企业级主动拨测式应用监测解决方案。
8202 123
阿里云拨测:主动探测Web应用质量,助力提升用户体验
|
消息中间件 缓存 监控
Sentry 开发人员文档(中文手册,二次开发指南)
Sentry 开发人员文档(中文手册,二次开发指南)
3568 0
Sentry 开发人员文档(中文手册,二次开发指南)
|
弹性计算 Kubernetes Cloud Native
K8s 网关选型初判:Nginx 还是 Envoy?
本文将从性能和成本、可靠性、安全性 3 方面,对两大开源实现进行比对,希望对正在做 K8s 网关选型的企业有所借鉴。
K8s 网关选型初判:Nginx 还是 Envoy?
|
消息中间件 Java API
Java一分钟之-JMS:Java消息服务
【6月更文挑战第11天】Java消息服务(JMS)是企业应用中实现组件解耦和异步通信的标准API。它包含点对点(P2P)和发布/订阅(Pub/Sub)两种消息模型。常见问题包括混淆消息模型、忽略事务管理和资源泄露。解决方法包括明确业务需求选择模型、使用事务确保消息可靠性以及正确关闭资源。文中提供了使用ActiveMQ的P2P模型的生产者和消费者代码示例,强调理解基础概念、避免问题以及实践是使用JMS的关键。
476 2
|
11月前
|
数据可视化 小程序 API
什么是低代码(Low-Code)?我们需要低代码吗?
低代码是一种通过可视化界面和配置化方式减少手写代码工作量的软件开发技术和工具模式,适合专业开发者及非技术人员快速创建应用。本文基于作者六年实践经验,深入浅出地讲解低代码的核心价值、应用场景及其对企业、开发团队和个人开发者的意义,并推荐了织信Informat、宜搭、爱速搭等十款主流低代码平台,帮助读者快速了解和选择合适的工具。全文干货满满,建议收藏。
|
存储 C语言
【学习笔记】verilog HDL之二:数据类型与表达式
本文介绍了Verilog语言中的常量、变量和表达式。Verilog有四种基本值:0、1、x(未知)和z(高阻)。整型常量有十进制和基数两种格式,实数型常量包括浮点数,字符串常量由双引号括起的字符序列构成。变量分为线网型和寄存器型,线网型包括wire、tri等11种类型,寄存器型有reg、integer、time等,其中reg可声明存储器。表达式中的操作数包括常数、参数、线网等8种类型,操作符包括算术、关系、逻辑等9种类型。
|
存储 算法 安全
MD5哈希算法:原理、应用与安全性深入解析
MD5哈希算法:原理、应用与安全性深入解析
|
缓存 前端开发 JavaScript
如何优化前端性能
前端性能一直是网站或应用程序的重要指标之一,因为它直接影响用户体验和转化率。本文将介绍如何通过减少HTTP请求,使用缓存,压缩资源,以及其他技术手段来提高前端性能。
|
设计模式 数据挖掘 C++
C++并发与多线程(三)单例设计模式与共享数据分析、call_once、condition_variable使用
C++并发与多线程(三)单例设计模式与共享数据分析、call_once、condition_variable使用
283 0