css clip-path 画五角星

简介

使用裁剪方式创建元素的可显示区域，实现区域裁剪。

浏览器兼容性

在这里插入图片描述

常用的三种方法

1. clip-path: circle(50px at 50px 50px)

以 50px 50px 的坐标为圆心裁剪一个半径 50px 的圆；

2. clip-path: ellipse(30px 40px at 50px 50px)

以 50px 50px 的坐标为圆心裁剪一个横向半径 30px，纵向半径 40px 的椭圆；

3. clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%)

按照多个坐标（x,y）剪裁一个多边形，此处是菱形。

有了clip-path，就可以轻易的实现任意多边形

绘制五角星

<div>五角星</div>

div{color: #fff;font-size: 24px;text-align: center;width: 200px;height: 200px;line-height: 200px;background: red;/* 绘制路径 */clip-path:polygon(50% 0,65% 40%, 100% 40%,72% 60%,85% 100%,50% 75%,15% 100%,28% 60%,0 40%,35% 40%);
}

在这里插入图片描述

补充阴影

若想给五角星加阴影直接用box-shadow没有任何效果,这是就用到了drop-shadow，关于此属性点击此处查看详情
具体代码

div{color: #fff;font-size: 24px;text-align: center;width: 200px;height: 200px;line-height: 200px;position:relative;/*不规则阴影*/filter:drop-shadow(0 0 12px rgba(0,0,0,0.5));
}
div:after{content:'';position: absolute;left: 0;right: 0;top: 0;bottom: 0;/* 设置层级，避免div内容被遮盖 */z-index: -1;background: red;/* 绘制路径 */clip-path:polygon(50% 0,65% 40%, 100% 40%,72% 60%,85% 100%,50% 75%,15% 100%,28% 60%,0 40%,35% 40%);
}