当前位置:网站首页>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 !
边栏推荐
- An error occurs when installing MySQL: could not create or access the registry key needed for the
- R language ggplot2 visualization: use the ggdotplot function of ggpubr package to visualize dot plot, set the palette parameter, and set the colors of data points and box graphs of dot plots at differ
- short i =1; I=i+1 and short i=1; Difference of i+=1
- Tensorflow and torch code verify whether CUDA is successfully installed
- Based on butterfly species recognition
- R language uses the order function to sort the dataframe data, and descending sorting based on a single field (variable)
- 思維導圖+源代碼+筆記+項目,字節跳動+京東+360+網易面試題整理
- How word displays modification traces
- Dark horse -- redis
- Documents to be used in IC design process
猜你喜欢
Druid 数据库连接池 详解
Swiftui game source code Encyclopedia of Snake game based on geometryreader and preference
LeetCode_双指针_中等_61. 旋转链表
How to access localhost:8000 by mobile phone
黑馬--Redis篇
Don't miss this underestimated movie because of controversy!
JDBC详解
IC设计流程中需要使用到的文件
Zero foundation entry polardb-x: build a highly available system and link the big data screen
CCNP Part 11 BGP (III) (essence)
随机推荐
About image reading and processing, etc
MRO industrial products enterprise procurement system: how to refine procurement collaborative management? Industrial products enterprises that want to upgrade must see!
Dark horse -- redis
【翻译】Linkerd在欧洲和北美的采用率超过了Istio,2021年增长118%。
数学知识——高斯消元(初等行变换解方程组)代码实现
R language ggplot2 visual time series histogram: visual time series histogram through two-color gradient color matching color theme
Spark foundation -scala
驼峰式与下划线命名规则(Camel case With hungarian notation)
Lick the dog until the last one has nothing (simple DP)
Php+redis realizes the function of canceling orders over time
安装Mysql报错:Could not create or access the registry key needed for the...
Tongyu Xincai rushes to Shenzhen Stock Exchange: the annual revenue is 947million Zhang Chi and Su Shiguo are the actual controllers
ZABBIX proxy server and ZABBIX SNMP monitoring
面试突击63:MySQL 中如何去重?
CPU负载很低,loadavg很高处理方法
ROS custom message publishing subscription example
Solution of commercial supply chain management platform for packaging industry: layout smart supply system and digitally integrate the supply chain of packaging industry
A method of removing text blur based on pixel repair
PMP每日一练 | 考试不迷路-7.6
三面蚂蚁金服成功拿到offer,Android开发社招面试经验