当前位置:网站首页>利用 clip-path 绘制不规则的图形
利用 clip-path 绘制不规则的图形
2022-07-06 11:32:00 【不二博客】
在日常开发过程中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
可视化工具,可以帮助我们快速的构建出想要的图形。
https://bennettfeely.com/clippy/
url 路径
除了以上基础的图形以外,我们还可以设置 svg
作为我们的路径进行剪裁。
<!-- 爱心 svg -->
<svg>
<clipPath id="love" clipPathUnits="objectBoundingBox">
<path
d="M0.5,1
C 0.5,1,0,0.7,0,0.3
A 0.25,0.25,1,1,1,0.5,0.3
A 0.25,0.25,1,1,1,1,0.3
C 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
可以剪裁出各种不规则的形状,使用的好可以简化我们的工作,同时也可以实现很多特殊的效果,是非常值得大家去学习和运用~
最后
感谢你的阅读~
如果觉得这篇文章对你有所帮助,点赞、在看是最大的支持!
边栏推荐
- Php+redis realizes the function of canceling orders over time
- The slave i/o thread stops because master and slave have equal MySQL serv
- 【pytorch】yolov5 训练自己的数据集
- zabbix 代理服务器 与 zabbix-snmp 监控
- JDBC详解
- 今日直播 | “人玑协同 未来已来”2022弘玑生态伙伴大会蓄势待发
- Three years of Android development, Android interview experience and real questions sorting of eight major manufacturers during the 2022 epidemic
- Pychrm Community Edition calls matplotlib pyplot. Solution of imshow() function image not popping up
- Interface test tool - postman
- Spark foundation -scala
猜你喜欢
中缀表达式转后缀表达式详细思路及代码实现
Graffiti intelligence is listed on the dual main board in Hong Kong: market value of 11.2 billion Hong Kong, with an annual revenue of 300 million US dollars
打家劫舍III[后序遍历与回溯+动态规划]
About static type, dynamic type, ID, instancetype
CPU负载很低,loadavg很高处理方法
安装Mysql报错:Could not create or access the registry key needed for the...
Interview assault 63: how to remove duplication in MySQL?
Druid database connection pool details
An error occurs when installing MySQL: could not create or access the registry key needed for the
Word如何显示修改痕迹
随机推荐
Use of deg2rad and rad2deg functions in MATLAB
php+redis实现超时取消订单功能
Computer network: sorting out common network interview questions (I)
In 50W, what have I done right?
LeetCode-1279. Traffic light intersection
USB host driver - UVC swap
The dplyr package of R language performs data grouping aggregation statistical transformations and calculates the grouping mean of dataframe data
C language daily practice - day 22: Zero foundation learning dynamic planning
Graffiti intelligence is listed on the dual main board in Hong Kong: market value of 11.2 billion Hong Kong, with an annual revenue of 300 million US dollars
Swagger2 reports an error illegal DefaultValue null for parameter type integer
三面蚂蚁金服成功拿到offer,Android开发社招面试经验
R语言ggplot2可视化:使用ggpubr包的ggviolin函数可视化小提琴图
全套教学资料,阿里快手拼多多等7家大厂Android面试真题
It's super detailed in history. It's too late for you to read this information if you want to find a job
Is not a drawable (color or path): the vector graph downloaded externally cannot be called when it is put into mipmap, and the calling error program crashes
R语言ggplot2可视化时间序列柱形图:通过双色渐变配色颜色主题可视化时间序列柱形图
R语言ggplot2可视化:使用ggpubr包的ggdotplot函数可视化点阵图(dot plot)、设置palette参数设置不同水平点阵图数据点和箱图的颜色
Druid 数据库连接池 详解
Problems encountered in using RT thread component fish
受益匪浅,安卓面试问题