[分享]css六边形圆角

CSS六边形圆角是一种非常独特的布局方式，可以帮助我们实现多种不同的效果，例如排版，图标等。下面我们来一起学习如何创建一个具有圆角的六边形元素。.hexagon { width: 100px; // ...

CSS六边形圆角是一种非常独特的布局方式，可以帮助我们实现多种不同的效果，例如排版，图标等。下面我们来一起学习如何创建一个具有圆角的六边形元素。

.hexagon {
    width: 100px;  // 宽度
    height: 55px;  // 高度
    background-color: #f2f2f2;  // 背景颜色
    position: relative;
}

.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 #f2f2f2;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.hexagon:after {
    bottom: -25px;  // 下半部分
    border-top: 25px solid #f2f2f2;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
} 

上面的代码中，我们首先定义了一个类名为“hexagon”的元素，并设置它的宽度、高度和背景颜色。接下来，我们使用“before”和“after”伪元素来分别创建六边形的上半部分和下半部分。

注意，我们使用了“border-left”和“border-right”属性来定义六边形的左右两侧，将其设置为“transparent”以便将该区域变成一个三角形，从而实现六边形的效果。

接下来，我们通过“border-top”和“border-bottom”属性来定义六边形的顶部和底部，注意要根据上下两部分来设置不同的圆角半径，从而实现完整的六边形效果。

希望这篇文章能够帮助大家更好地掌握CSS六边形圆角的创建方式，为你的设计增加更多的可能性。