css实现各种多边形图案

　　使用css的border边框属性和宽度高度可以实现各种形状的图形，如下：梯形
　　梯形
　　html：
　　css：梯形。trapezoid｛width：80height：0；border：40bordertop：0borderbottom：80pxsolidb4a078；｝五角星
　　五星
　　html：
　　css：。star5points｛width：0；height：0；position：margin：50px0；border：80pxsolidrgba（0，0，0，0）；bordertop：0borderbottom：56transform：rotateZ（35deg）；｝。star5points：：before｛content：；width：0；height：0；position：top：36left：52border：24pxsolidrgba（0，0，0，0）；bordertop：0borderbottom：64transform：rotateZ（35deg）；｝。star5points：：after｛content：；width：0；height：0；position：top：3left：86border：80pxsolidrgba（0，0，0，0）；bordertop：0borderbottom：56transform：rotateZ（70deg）；｝带子形状
　　html：
　　css：。ribbon｛width：0；height：80border：40pxsolid56ad66；bordertop：0borderbottom：28pxsolidrgba（0，0，0，0）；｝钻石形状
　　钻石
　　这个图形由2部分组成，当上部图形的背景色比下部背景色浅时就会有点立体效果，如下图。
　　html：
　　css：上部图形背景色。masonry｛width：50height：0；position：margin：20px082border：25pxsolidrgba（0，0，0，0）；bordertopwidth：0；borderbottomcolor：b4a078；｝下部图形背景色。masonry：：after｛content：；width：0；height：0；position：top：25left：25border：50pxsolidrgba（0，0，0，0）；bordertop：70pxsolidb4a078；borderbottomwidth：0；｝心形
　　心形
　　html：
　　css：。heart｛content：；display：width：100minheight：80position：transformorigin：50500；｝左边形状。heart：before｛content：；display：width：50height：80position：top：0；left：50borderradius：50px50px00；background：ff66transform：rotateZ（45deg）；transformorigin：01000；｝右边形状。heart：after｛content：；display：width：50height：80position：top：0；left：0；borderradius：50px50px00；background：ff66transform：rotateZ（45deg）；transformorigin：1001000；｝
　　心形由左右2个形状组成，如下图：
　　去掉after的样式就会看到这个图形
　　去掉before的样式就会看到这个图形