如果只是一个简单的五边形，可以用css shape去做。仔细分析图形，发现它实际上是3个五边形的叠加：1. 最外面一层浅蓝色的稍大一些，2. 中间一层深蓝色颜色和背景相同，但尺寸略小，盖在下面那层上，由此而产生了一个边框的效果，3. 最里面的五边形颜色最深。所以一共是这么3层形状差不多的五边形。
我最开始的想法是先画一个深蓝色的矩形，然后用背景色做一个小三角形盖在右下角就可以了。也确实实现了，但是画不出边框来了，感觉不够完美。
最后还是决定用稍微麻烦一些的clip path去实现。
第一步，先用clip path画出五边形。为了简单起见，找 一个网站 先把路径画出来。左下角的代码是这样的：
-webkit-clip-path: polygon(74px 64px,70px 313px,248px 315px,311px 240px,309px 52px);
因为我们的图形画的不规整，所以数字比较奇怪，把它整理的整齐一些：
-webkit-clip-path: polygon(70px 70px,70px 315px,240px 315px,315px 240px,315px 70px);
调整为以0为起点：
-webkit-clip-path: polygon(0px 0px,0px 315px,240px 315px,315px 240px,315px 0px);
再调整为百分比：
-webkit-clip-path: polygon(0% 0%,0% 100%,240px 100%,100% 240px,100% 0%);
在这里240px不能直接变为百分比，否则图像会失真。正确的做法是使用calc:
-webkit-clip-path: polygon(100% 0%,100% calc(100% - 20px),calc(100% - 20px) 100%,0px 100%,0% 0%);
然后，因为我们需要一共是3个多边形，所以还需要增加一个before，一个after伪元素。最后的完整代码就是这样的：
html部分：
<div class="aboutus-event-polygon"> <div class="polygon-content">内容内容内容</div> </div>
css部分：
.polygon-content { background-color: #184284; padding: 5px; position: relative; z-index: 300; -webkit-clip-path: polygon(100% 0%,100% calc(100% - 20px),calc(100% - 20px) 100%,0px 100%,0% 0%); } .aboutus-event-polygon:before { background-color: #006ec8; content: ''; height: 100%; left: 10px; position: absolute; top: 10px; width: 100%; z-index: 200; -webkit-clip-path: polygon(100% 0%,100% calc(100% - 20px),calc(100% - 20px) 100%,0px 100%,0% 0%); } .aboutus-event-polygon:after { background-color: #2b9bd7; content: ''; height: calc(100% + 4px); left: 12px; position: absolute; top: 8px; width: 100%; z-index: 100; -webkit-clip-path: polygon(100% 0%,100% calc(100% - 22px),calc(100% - 22px) calc(100% + 2px),0px calc(100% + 2px),0% 0%); }
文章转载请保留网址：http://www.iswweb.com/news/faq/1723.html
