时间:2021-05-08
说下两种css 制作正六边形的方法。
先看一下结果:
在之前要先了解一下正六边形内角和边的关系,正六边形的每个内角是60deg,如图(√3其实是根号3):
方法一:原理把正六边形分成三部分,左中右分别是:before部分,div部分,after部分,如图:
before三角形部分是div的before伪元素,after三角形部分是div的after伪元素。
html代码:
<div class='div'></div>
css代码:
.div { position: relative; width: 50px; height: 86.6px; margin: 50px auto; background-color: red; } .div:before { content: ''; display: block; position: absolute; width: 0; height: 0; right:50px; border-width: 43.3px 25px; border-style: solid; border-color: transparent red transparent transparent; } .div:after { content: ''; display: block; position: absolute; width: 0; height: 0; left:50px; border-width: 43.3px 25px; border-style: solid; border-color: transparent transparent transparent red; top:0; }注意div及伪元素的宽高需要根据上面的公式计算。
方法二:也是把正六边形分成三个宽高相同的div,然后使用定位以及css3 transform:rotate分别向左右旋转60deg形成正六边形,如图:
html代码:
<div class='div-2'> <div class='one'></div> <div class='two'></div> <div class='three'></div></div>css代码:
.one { width: 50px; height: 86.6px; margin: 0 auto; border-top: 1px solid red; border-bottom: 1px solid red; } .two { position: absolute; width: 50px; height: 86.6px; left: 25px; top: 0; transform: translate(-50%,-50%); transform: rotate(60deg); border-top: 1px solid red; border-bottom: 1px solid red; } .three { position: absolute; width: 50px; height: 86.6px; left: 25px; top: 0; transform: translate(-50%,-50%); transform: rotate(300deg); border-top: 1px solid red; border-bottom: 1px solid red; }以上两种方法,元素的宽高尺寸以及左右位移需要根据上面的公式计算不能随意填写。
总结
以上所述是小编给大家介绍的css画正六边形的两种方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文主要介绍了css实现六边形图片的示例代码,分享给大家,具体如下:不说别的,先上效果:用简单的div配合伪元素,即可‘画出’这幅六边形
六边形的实现原理其实就是通过旋转三个重叠的矩形得到的,如下图所示:这里为了得到一个正的六边形,两个矩形旋转的角度必须为-60deg和60deg,以及矩形高宽比必
一、前言六边形能力图如下,由6个六边形组成,每一个顶点代表其在某一方面的能力。这篇文章我们就来看看如何基于canvas去绘制这么一个六边形能力图。当然,你也可以
CAD中,架设多边形有个内切圆,填充圆之外的部分。做法如下。 1、画正六边形, 2、用绘图——>圆——>
blender要创建正六边形、正八边形等这些正多边形,我们可以通过对基础网格模型的编辑,或者通过对曲线的编辑一些方法,制作出我们需要的正多边形。软件名称:Ble