css3五边形的写法

CSS3 五边形的写法

.poly {
    width: 0;
    height: 0;
    border-width: 50px 0 0 43.3px;
    border-style: solid;
    border-color: #f00 transparent transparent transparent;
    transform: rotate(60deg);
}

其中，border-width定义五边形的高，border-color只定义第一条边的颜色，剩下的三条边的颜色可以通过透明度来实现。

另外，transform: rotate(60deg)用来进行旋转，使五边形变为竖向。

在HTML中使用时，只需加上class属性即可：

<div class="poly"></div>

效果如下：