html css 正六边形,css画正六边形

说下两种css 制作正六边形的方法。

先看一下结果：

在之前要先了解一下正六边形内角和边的关系，正六边形的每个内角是60deg，如图(√3其实是根号3)：

方法一：原理把正六边形分成三部分，左中右分别是：before部分，div部分，after部分，如图：

before三角形部分是div的before伪元素，after三角形部分是div的after伪元素。

html代码：

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代码：

css代码:

1 .one {

2 width: 50px;

3 height: 86.6px;

4 margin: 0 auto;

5 border-top: 1px solid red;

6 border-bottom: 1px solid red;

7 }

8 .two {

9 position: absolute;

10 width: 50px;

11 height: 86.6px;

12 left: 25px;

13 top: 0;

14 transform: translate(-50%,-50%);

15 transform: rotate(60deg);

16 border-top: 1px solid red;

17 border-bottom: 1px solid red;

18 }

19 .three {

20 position: absolute;

21 width: 50px;

22 height: 86.6px;

23 left: 25px;

24 top: 0;

25 transform: translate(-50%,-50%);

26 transform: rotate(300deg);

27 border-top: 1px solid red;

28 border-bottom: 1px solid red;

29 }

以上两种方法，元素的宽高尺寸以及左右位移需要根据上面的公式计算不能随意填写

html css 正六边形,css画正六边形相关推荐

html中怎么写正六边形,用css画正六边形的方法
用css画正六边形的方法发布时间:2020-09-14 14:56:11 来源:亿速云阅读:80 作者:小新小编给大家分享一下用css画正六边形的方法,希望大家阅读完这篇文章后大所收获,下面让我 ...
html如何将图片做成六边形,css画正六边形的两种方法
说下两种css 制作正六边形的方法. 先看一下结果: 在之前要先了解一下正六边形内角和边的关系,正六边形的每个内角是60deg,如图(√3其实是根号3): 方法一:原理把正六边形分成三部分,左中右分别 ...
html中怎么写正六边形,如何用css画正六边形？用css画正六边形的两种方法（代码实例）...
本章给大家介绍如何用css画正六边形?用css画正六边形的两种方法(代码实例).有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 在之前要先了解一下正六边形内角和边的关系,正六边形的每个 ...
matlab坐标画正六边形,Matlab任意正六边形随机撒点实现
任意正六边形随机撒点是通信仿真里经常用到的,无奈网上资料很少,参照http://www.ilovematlab.cn/thread-136761-1-1.html,我又苦思敏想里一下午,这个问题才得 ...
【matlab】画正六边形、矩形、圆形点阵
矩形 clc;clear; %%正方形排列 n=22;%为奇数,表示几x几的矩阵 a=zeros(n,n,2);%初始化 for i=1:nfor j=1:na(i,j,1)=-4.5*((n-1)/ ...
只用1个div，你能用CSS常规属性绘制：正3、4、5、6、7、8边形吗？
关注前端达人,与你共同进步开篇今天我们来玩一个有趣的CSS实验,想象下,只用一个div,你能用CSS绘制一个正三角形,正方形,正五边形,正六边形,正七边形,正八边形吗? 也许此时你想了好几种方法进 ...
在Python中使用Turtle库画“蜂窝状六边形”
(2022-05-16) 编程题:使用turtle库绘制一个蜂窝状六边形. 分析: 如图,只要画出外围的6个六边形即可. 6个六边形的外接圆圆心,关于原点,间隔60°,均匀分布. 外接圆半径为r,圆心 ...
画正圆角矩形 - HTML5 Canvas 作图
function DrawRoundRect(Canvas,P1,P2,Radius) 功能:画正圆角矩形参数:P1:矩形左上角坐标:P2:矩形右下角坐标: Radius:圆角大小源代码: fun ...
[css] 不使用border画出1px高的线，在不同浏览器的标准和怪异模式下都能保持效果一样
[css] 不使用border画出1px高的线,在不同浏览器的标准和怪异模式下都能保持效果一样 <div style="width: 100%;height: 1px;"&g ...
[css] 请使用css画一个圆，方法可以多种
[css] 请使用css画一个圆,方法可以多种 <div class="circle"></div>1.border-radius.cirlce{width ...

html css 正六边形,css画正六边形

html css 正六边形,css画正六边形相关推荐

最新文章

热门文章