当前位置:网站首页>Using clip path to draw irregular graphics
Using clip path to draw irregular graphics
2022-07-06 19:28:00 【Buer blog】
In the daily development process UI Designers will have irregular shapes and designs , In most cases, we use background images to render irregular shapes , But this is related to performance optimization Reduce HTTP request
The principle of is contrary .
for instance UI The designer wants us to render a diamond with gradient colors .

Maybe you think you can pass transform: skew(-10deg)
Function to tilt the graph , This seems to be a good plan , But we want to add some content .

As shown on the right side of the figure below, we use transform: skew(-10deg)
Change the tilt angle of your element , But its internal elements also inherit the parent transform
Attribute is skewed . Obviously this is not UI The effect the designer wants .
At this moment, there must be a witty partner saying , Since the child element inherits the parent element transform: skew(-10deg)
attribute , So let's set the sub element transform: skew(10deg)
Attribute is OK ?

At this moment, there is a new problem , Although we have made the sub elements display horizontally , But the midpoint of our element also tilts , Also can't reach UI The designer's requirements .
And it's actually very simple to achieve the effect , We just need clip-path
To replace transform
that will do .
// transform: skew(-10deg);
clip-path: polygon(0% 100%, 15% 0%, 100% 0%, 85% 100%);
clip-path
seeing the name of a thing one thinks of its function ,clip-path
Is a clipping path , Display in the path , Hidden outside the path .
inset rectangular

circle circular

ellipse The ellipse

polygon polygon

What about? , Now see the above properties , Reflect on the previous project , There will be clip-path
Places that can be replaced or simplified .
Here is a recommendation clip-path
Visualization tools , It can help us quickly build the desired graphics .
https://bennettfeely.com/clippy/

url route
In addition to the above basic graphics , We can also set svg
Cut as our path .
<!-- love 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>

extend
That's all clip-path
Some commonly used properties of , So can we pass clip-path
What effect is achieved ?
For example, let's draw a chat window containing bubble messages .

<div class="message">
<div class="message-pohoto">
<img src="./logo.png" alt="" />
</div>
<div class="message-text">
There is nothing like keeping yourself excellent all the time, which makes people feel hard . From this day onwards , Give up your obsession with excellence . Instead of clinging to excellence , Let yourself have the courage not to escape anything . No fear of failure , Push forward the work decisively , Let yourself become the brave one who dares to face everything as soon as possible .
</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));
}
summary
clip-path
You can cut out all kinds of irregular shapes , Good use can simplify our work , At the same time, it can also achieve many special effects , It is very worthy of everyone to learn and apply ~
Last
Thanks for reading ~
If you find this article helpful , give the thumbs-up 、 Watching is the biggest support !
边栏推荐
- 快速幂模板求逆元,逆元的作用以及例题【第20届上海大学程序设计联赛夏季赛】排列计数
- JDBC details
- 反射及在运用过程中出现的IllegalAccessException异常
- C # - realize serialization with Marshall class
- 关于图像的读取及处理等
- Meilu biological IPO was terminated: the annual revenue was 385million, and Chen Lin was the actual controller
- The dplyr package of R language performs data grouping aggregation statistical transformations and calculates the grouping mean of dataframe data
- spark基础-scala
- About image reading and processing, etc
- RT-Thread 组件 FinSH 使用时遇到的问题
猜你喜欢
倒计时2天|腾讯云消息队列数据接入平台(Data Import Platform)直播预告
Characteristic colleges and universities, jointly build Netease Industrial College
How to type multiple spaces when editing CSDN articles
Dark horse -- redis
LeetCode-1279. 红绿灯路口
Solution of intelligent management platform for suppliers in hardware and electromechanical industry: optimize supply chain management and drive enterprise performance growth
Sanmian ant financial successfully got the offer, and has experience in Android development agency recruitment and interview
学习探索-无缝轮播图
深入分析,Android面试真题解析火爆全网
Mysql Information Schema 学习(二)--Innodb表
随机推荐
ACTF 2022圆满落幕,0ops战队二连冠!!
A popular explanation will help you get started
Xingnuochi technology's IPO was terminated: it was planned to raise 350million yuan, with an annual revenue of 367million yuan
Take a look at how cabloyjs workflow engine implements activiti boundary events
LeetCode_双指针_中等_61. 旋转链表
short i =1; I=i+1 and short i=1; Difference of i+=1
接雨水问题解析
Spark foundation -scala
Yyds dry goods inventory leetcode question set 751 - 760
Test technology stack arrangement -- self cultivation of test development engineers
R language uses the order function to sort the dataframe data, and descending sorting based on a single field (variable)
主从搭建报错:The slave I/O thread stops because master and slave have equal MySQL serv
受益匪浅,安卓面试问题
Use of deg2rad and rad2deg functions in MATLAB
【翻译】Linkerd在欧洲和北美的采用率超过了Istio,2021年增长118%。
Solution of intelligent management platform for suppliers in hardware and electromechanical industry: optimize supply chain management and drive enterprise performance growth
Pytorch common loss function
Swiftui game source code Encyclopedia of Snake game based on geometryreader and preference
凤凰架构3——事务处理
How to do smoke test