纯css构造多边形div

3fuyu 发布于2019-08-29 11:01 / 3466人阅读

摘要：设计师画的方案里有如下的图形如果只是一个简单的五边形，可以用去做。所以一共是这么层形状差不多的五边形。第一步，先用画出五边形。正确的做法是使用然后，因为我们需要一共是个多边形，所以还需要增加一个，一个伪元素。

设计师画的方案里有如下的图形：

如果只是一个简单的五边形，可以用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部分：

</>复制代码 
    内容内容内容

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%);
}

云服务器 GPU云服务器纯CSS div + css flash div css div加css

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111372.html

单一div的正多边形变换（纯CSS）

摘要：所以只要把正五边形的稍作修改就可以做出正六边形了。有了长宽之后，就开始用来写啰正八边形正八边形其实就是把正七边形上面的三角形变成梯形，然后中间的梯形变成矩形就搞定了，正八边形的夹角为度，计算出来的各个区域长宽如下图。上一篇我们介绍了如何利用before和after伪元素来做Material Design风格的按钮，里头关键的技术就在于活用边框宽度和div本体宽高，因此这篇再加码一个效...

CatalpaFlat 2019-08-02 16:14 评论0 收藏0
单一div的正多边形变换（纯CSS）

摘要：所以只要把正五边形的稍作修改就可以做出正六边形了。有了长宽之后，就开始用来写啰正八边形正八边形其实就是把正七边形上面的三角形变成梯形，然后中间的梯形变成矩形就搞定了，正八边形的夹角为度，计算出来的各个区域长宽如下图。上一篇我们介绍了如何利用before和after伪元素来做Material Design风格的按钮，里头关键的技术就在于活用边框宽度和div本体宽高，因此这篇再加码一个效...

Hujiawei 2019-08-29 18:44 评论0 收藏0
Codepen 每日精选（2018-3-24）

摘要：纯画的抽象小鸟纯制作的左侧弹出菜单仿制的页面布局多边形碰撞检测，孤立的多边形是绿色，多边形容器相交变成蓝色，多边形本身相交变成红色。百科机器人，通过调用，可以查询词条，也可以随机显示词条。按下右侧的点击预览按钮可以在当前页面预览，点击链接可以打开原始页面。纯 css 画的抽象小鸟https://codepen.io/gregoryb/f... 纯 css 制作的左侧弹出菜单http...

woshicixide 2019-08-30 14:13 评论0 收藏0
Codepen 每日精选（2018-3-24）

摘要：纯画的抽象小鸟纯制作的左侧弹出菜单仿制的页面布局多边形碰撞检测，孤立的多边形是绿色，多边形容器相交变成蓝色，多边形本身相交变成红色。百科机器人，通过调用，可以查询词条，也可以随机显示词条。按下右侧的点击预览按钮可以在当前页面预览，点击链接可以打开原始页面。纯 css 画的抽象小鸟https://codepen.io/gregoryb/f... 纯 css 制作的左侧弹出菜单http...

vincent_xyb 2019-08-22 15:41 评论0 收藏0