用css快速绘制多边形(三角形/菱形/梯形/五角星)-polygon辅助属性

在css中有个有趣的属性叫做clip-path,它的一种辅助属性叫做polygon,MDN对他的介绍如下:

clip-path CSS 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。

polygon():定义一个多边形（使用一个 SVG 填充规则和一组顶点）

我们可以利用这个属性更加简洁的完成三角形或者是菱形梯形等多边形(直边)的绘制

one 三角形

首先惯例让我们一起来看一看效果图,三角形有非常明显的三个顶点,如下图所示

将三个顶点代入函数即可得到图形,注意我们在画多边形时一定要保证此元素有足够的空间可以放下坐标值,超出范围的部分可是不会显示的哦~

  .box {
    
    
            clip-path: polygon(17px 182px, 109px 23px, 199px 182px);
            background-color: pink;
            width: 199px;
            height: 182px;
        }

效果是一个粉色实心三角形

这也是clip-path属性的一个弊端,没办法添加边框,使用的限制非常多,但是作为一个功能强大的属性,还是很值得尝试和了解的:)

two 菱形

菱形是一个拥有四个顶点的图形,还是同理,我们需要先得到顶点坐标

代入代码就是

 .box {
    
    
            clip-path: polygon(34px 96px, 98px 32px, 163px 96px,98px 159px);
            background-color: cadetblue;
            width: 200px;
            height: 182px;
        }

打印出菱形之后,梯形和平行四边形等四边形就是完全一样的,接下来我们展示一个更加复杂的图形让大家更深层的感觉到这个属性的强大之处

three 五角星

首先先上顶点坐标图

无角星的顶点坐标比较多,在输入的时候一定要记得按照顺序输入,否则clip-path在处理时就有可能会发生错误生成意料之外的错误或者形状
代入代码如下

     .box {
    
    
            clip-path: polygon(31px 191px, 231px 180px, 364px 31px,435px 214px,619px 296px,463px 423px,444px 621px,277px 513px,80px 557px,132px 362px);
            background-color: yellow;
            width: 650px;
            height: 650px;
        }

效果如下

当然除了规则图形,此属性还能创造更多从来没有出现过的图形,大家如果感兴趣的话都是可以自行尝试自行探索的哦:)

end