外贸网站建设

教你怎样用纯css构造多边形div

如果只是一个简单的五边形,可以用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(00%,0100%,240px 100%,100240px,1000%);

在这里240px不能直接变为百分比,否则图像会失真。正确的做法是使用calc:

-webkit-clip-path: polygon(1000%,100% calc(100% – 20px),calc(100% – 20px) 100%,0px 100%,00%);

然后,因为我们需要一共是3个多边形,所以还需要增加一个before,一个after伪元素。最后的完整代码就是这样的:

html部分:

<div class="aboutus-event-polygon"> <div class="polygon-content">内容内容内容</div> </div>

css部分:

.polygon-content background-color#184284padding5px; position: relative; z-index300-webkit-clip-path: polygon(1000%,100% calc(100% – 20px),calc(100% – 20px) 100%,0px 100%,00%); } .aboutus-event-polygon:before background-color#006ec8content''height100%; left10px; position: absolute; top10px; width100%; z-index200-webkit-clip-path: polygon(1000%,100% calc(100% – 20px),calc(100% – 20px) 100%,0px 100%,00%); } .aboutus-event-polygon:after background-color#2b9bd7content''height: calc(100% + 4px); left12px; position: absolute; top8px; width100%; z-index100-webkit-clip-path: polygon(1000%,100% calc(100% – 22px),calc(100% – 22px) calc(100% + 2px),0px calc(100% + 2px),00%); }
本文转载自网络。

本文由福步科技小编摘自互联网,转载请注明出处。

[上海网站建设网图文来源于网络,如有侵权,请联系删除]

本站主要关键词:外贸网站建设网站建设网站制作网站设计网页设计网页制作小程序开发