在日常开发过程中UI设计师会存在不规则的形状和设计，在大多数的情况下我们使用了背景图片来渲染不规则的形状，但这与性能优化减少HTTP请求的原则是背道而驰的。
比如说UI设计师希望我们渲染出一个带有渐变颜色的菱形。
也许大家想到可以通过transform: skew(-10deg)函数来使图形倾斜，这看起来是一个不错的方案，但是我们想里面添加一些内容。
如下图右侧我们使用transform: skew(-10deg)改变你的元素的倾斜角度，但是其内部的元素也继承了父级的transform属性发生了倾斜。显然这不是UI设计师想要的效果。
此刻肯定会有机智的小伙伴说，既然子元素继承了父元素的transform: skew(-10deg)属性，那么我们设置子元素的transform: skew(10deg)属性不就可以了吗？
而此时此刻又出现了一下新的问题，虽然我们已经使子元素水平展示，但是我们元素的中点也发生了倾斜，同样也达不到UI设计师的要求。
而想要实现效果其实很简单，我们只需要clip-path来代替掉transform即可。
// transform: skew(-10deg);clip-path: polygon(0% 100%, 15% 0%, 100% 0%, 85% 100%);
clip-path
顾名思义，clip-path是一个剪裁的路径，路径内的展示，路径外的隐藏。
inset 矩形
circle 圆形
ellipse 椭圆
polygon 多边形
怎么样，现在看到以上的属性，再反思一下之前的项目中，一定会有clip-path可代替或者简化的地方。
在这里推荐一款clip-path可视化工具，可以帮助我们快速的构建出想要的图形。
/clippy/
url 路径
除了以上基础的图形以外，我们还可以设置svg作为我们的路径进行剪裁。
<!-- 爱心 svg --><svg><clipPath id="love" clipPathUnits="objectBoundingBox"><pathd="M0.5,1C 0.5,1,0,0.7,0,0.3A 0.25,0.25,1,1,1,0.5,0.3A 0.25,0.25,1,1,1,1,0.3C 1,0.7,0.5,1,0.5,1 Z"/></clipPath></svg><style>div {clip-path: url(#love);}</style>
延伸
以上就是clip-path的常用的一些属性了，那么我们到底可以通过clip-path实现什么效果呢？
比如我们来绘制绘制一个包含气泡消息的的聊天窗口。
<div class="message"><div class="message-pohoto"><img src="./logo.png" alt="" /></div><div class="message-text">没有什么比让自己时刻保持优秀让人感到辛苦的了。从今天起，放弃对优秀的执念吧。与其执着于优秀，不妨让自己拥有不逃避任何事情的勇敢。不惧失败，果断地推进工作，让自己尽快成为那个敢于面对一切的勇者。</div></div><style>body,html {background-color: #f9f9f9;}.message {display: flex;align-items: flex-start;padding: 20px 10px;}.message-pohoto {padding-right: 20px;}.message-pohoto > img {width: 46px;height: 46px;border-radius: 50%;}.message-text {display: inline-block;position: relative;min-height: 46px;box-sizing: border-box;display: flex;align-items: center;color: #fff;font-size: 14px;padding: 10px 10px 10px 15px;--bg: linear-gradient(45deg, #ff3c41, #ff9800);filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.5));}.message-text::before,.message-text::after {content: "";position: absolute;width: 100%;height: 100%;left: 0;top: 0;background: var(--bg);z-index: -1;}.message-text::before {clip-path: inset(0 0 0 5px round 5px);}.message-text::after {clip-path: polygon(0% 23px, 5px calc(23px + 5px), 5px calc(23px - 5px));}
总结
clip-path可以剪裁出各种不规则的形状，使用的好可以简化我们的工作，同时也可以实现很多特殊的效果，是非常值得大家去学习和运用~
最后
感谢你的阅读~
如果觉得这篇文章对你有所帮助，点赞、在看是最大的支持！
如果觉得《利用 clip-path 绘制不规则的图形》对你有帮助，请点赞、收藏，并留下你的观点哦！
