[分享]css六边形怎么写

在设计网页界面时，六边形是一种很有趣的形状，也是很受欢迎的。利用CSS实现六边形的方法有很多种，其中一种方法是使用伪元素和transform属性。.hexagon{ :relative; width:...

在设计网页界面时，六边形是一种很有趣的形状，也是很受欢迎的。利用CSS实现六边形的方法有很多种，其中一种方法是使用伪元素和transform属性。

.hexagon{
    position:relative;
    width:100px;
    height:58px;
    margin: 29px 0;
    background-color:#6A5ACD;
    float:left;
    overflow:hidden;
}
.hexagon:before,
.hexagon:after{
    content:"";
    position:absolute;
    width:0;
    border-left:50px solid transparent;
    border-right:50px solid transparent;
}
.hexagon:before{
    top:-25px;
    border-bottom:25px solid #6A5ACD;
}
.hexagon:after{
    bottom:-25px;
    border-top:25px solid #6A5ACD;
} 

首先我们需要定义一个类名为“hexagon”，并将其“position”属性设置为“relative”，以便使其内的伪元素相对于其进行定位。接着，我们设置该类的“width”和“height”属性，以及一个“margin”值来使该元素垂直居中在父元素内。

接下来，我们设置一个背景颜色为紫色的六边形，为了实现六边形的效果，我们需要使用类的“overflow”属性将其内部的内容进行裁剪。

接着我们需要使用“:before”和“:after”伪元素，使其分别作为六边形的上下边。在伪元素内部，我们设置“content”属性为空字符串并设置其“position”属性为“absolute”，以便使其相对于“hexagon”元素进行定位。

我们在“:before”伪元素中设置了“top”值为“-25px”，为了使其相对于“hexagon”元素的顶部进行定位。并设置其边框：左上角和右上角设置为50px的透明边框，底部边缘设置为25个px的紫色边框。这样就可以实现一个上部为三角形的六边形。

反之，我们在“:after”伪元素中设置了“bottom”值为“-25px”，为了使其相对于“hexagon”元素的底部进行定位。并设置其边框：左下角和右下角设置为50px的透明边框，顶部边缘设置为25个px的紫色边框。这样就可以实现一个上下边都为三角形的六边形。

最后，在HTML中使用该类名就可以实现六边形的效果了。