css画正六边形的两种方法_CSS教程_CSS_网页制作_脚本之家

css画正六边形的两种方法

  发布时间：2018-07-06 16:52:11   作者：佚名   我要评论

undefined

 

反馈意见：

视觉干扰内容不宜不感兴趣其他原因返回

感谢您的反馈！

您的反馈已记录，我们将努力改善您的浏览体验。

本文给大家分享css画正六边形的两种方法，每种方法都不错，需要的朋友跟随脚本之家小编一起看看吧

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

先看一下结果：

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

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

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

html代码：

<div class='div'></div>

css代码：

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

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

?

1

2

3

4

5

<div class=`'div-2'`>

<div class=`'one'`></div>

<div class=`'two'`></div>

<div class=`'three'`></div>

</div>

css代码:

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

.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(`60`deg);

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(`300`deg);

border-top`: 1px solid red`;

border-bottom`: 1px solid red`;

}

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

总结

以上所述是小编给大家介绍的css画正六边形的两种方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

Original url: Access
Created at: 2019-04-17 13:01:59
Category: default
Tags: none

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到

请先后发表评论
  • 最新评论
  • 总共0条评论