[分享]css3圆角多边形

CSS3圆角多边形是一种具有美观性的图形形状，它可以通过CSS3中的borderradius属性进行实现。这个属性可以应用于所有的HTML元素，包括矩形、正方形、圆形、多边形等，它可以让这些元素的边框...

CSS3圆角多边形是一种具有美观性的图形形状，它可以通过CSS3中的border-radius属性进行实现。这个属性可以应用于所有的HTML元素，包括矩形、正方形、圆形、多边形等，它可以让这些元素的边框具有圆角效果，从而让页面更加美观。

/* 一个圆形 */
.circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

/* 一个矩形 */
.rectangle {
    width: 200px;
    height: 100px;
    border-radius: 10px;
}

/* 一个正方形 */
.square {
    width: 100px;
    height: 100px;
    border-radius: 10px;
}

/* 一个六边形 */
.hexagon {
    width: 100px;
    height: 55px;
    background-color: red;
    position: relative;
}
.hexagon:before,
.hexagon:after {
    content: "";
    position: absolute;
    bottom: -27.5px;
    width: 0;
    border-top: 27.5px solid red;
}
.hexagon:before {
    left: -50px;
    border-right: 50px solid transparent;
}
.hexagon:after {
    right: -50px;
    border-left: 50px solid transparent;
} 

通过上面的代码示例可以看到，圆角多边形的实现不仅仅局限于矩形和圆形，我们还可以通过CSS3的伪元素:before和:after来实现其他的多边形，比如上面的六边形。

如果你想要更加绚丽的效果，还可以组合使用多种CSS3属性，比如box-shadow、transform等，来实现更加丰富的效果，比如立体的效果、旋转的效果等等。