多边形的实现

利用边框实现多边图形

三角形的实现：

当你对边框的css样式设置成这样时：

.kk1{
width: 0; height: 0;
border-top:50px solid gold;
border-left: 100px solid gray;
border-bottom: 50px solid black;}

得到如下效果图

当你对边框的css样式设置成这样时：

.kk{width: 0; height: 0;
border-top:50px solid transparent;
border-left: 100px solid gray;
border-bottom: 50px solid transparent;}
得到如下效果图：

所以下面这个图形的css样式为：

.gg{width: 250px;height: 50px; margin-left: 30px;                             margin-top: 100px; background-color: gray;                            position: relative;                            }.gg:before{                            content: "";                            position: absolute;                            right: -50px;                            width: 0;                            height: 0;                            border: 25px solid transparent;                            border-left: 25px solid gray;                        }.gg p{text-align: center;line-height: 50px; font-size: 30px; font-weight: bold; color: #fff;}

利用伪类把三角形定位到长方形的后面去，这样就构成了一个这样的多边形。