css六边形怎么画


本文摘自PHP中文网,作者藏色散人,侵删。

css画出六边形的方法:1、把正六边形分成三部分,然后将div及伪元素的宽高计算出来并设置;2、把正六边形分成三个宽高相同的div,然后使用定位以及css3 transform:rotate分别向左右旋转60deg形成正六边形即可。

本教程操作环境:windows7系统、css3版本、Dell G3电脑。

推荐:css视频教程

首先了解一下正六边形内角和边的关系,正六边形的每个内角是60deg,如图(√3其实是根号3):

a7249e17b18fdf0c3b582e31b4a9060.png

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

5a30787706b72b0079b7dc07a9cb072.png

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

html代码:

1

<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及伪元素的宽高需要根据上面的公式计算。

阅读剩余部分

相关阅读 >>

css如何调整字体颜色

css如何让a标签不可点击

css max-width属性怎么用

css div如何居中显示

css 怎么设置透明度渐变

css为什么不起作用

如何修改css样式

css伪类选择器介绍

怎么保存css样式

如何实现css代码复用

更多相关阅读请进入《css》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...