如何为倾斜的边缘使用剪切路径? [英] How can I Use Clip-Path for slanted edges?
本文介绍了如何为倾斜的边缘使用剪切路径?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
当前使用此CSS进行从左到右的底部倾斜:
Currently using this CSS for a bottom slant going up from left to right:
clip-path: polygon( 0 0, 100% 0, 100% calc(100% - 3vw), 0 100% );
它对于响应式解决方案非常有效,但是很难弄清楚如何针对div顶部从左到右倾斜的响应式解决方案执行此操作.
It works very well for a responsive solution but having a hard time figuring out how to do this for a responsive solution for a slant at the top of the div going down from left to right.
我尝试过:
clip-path: polygon( 0 0, 100% calc(100% - 29vw), 100% 100%, 0 100% );
谢谢!
推荐答案
您可以进行如下调整.您将第二个点从 3vw
开始降低,然后将另一点放回 100%
You can adjust like below. You make the second point to start lower by 3vw
and you put back the other one to 100%
.box {
height: 100px;
background: red;
clip-path: polygon( 0 0, 100% 3vw, 100% 100%, 0 100%);
/* (0,0) ----------------- (100%,0)
| |<---------(100%,3vw)
| |
| |
| |
(0,100%) ----------------- (100%,100%)
}
<div class="box">
</div>
如果要从右到左,请按以下步骤操作:
And like this if you want from right to left:
.box {
height: 100px;
background: red;
clip-path: polygon( 0 3vw, 100% 0, 100% 100%, 0 100%);
}
<div class="box">
</div>
侧面:
.box {
height: 100px;
background: red;
clip-path: polygon( 0 0, calc(100% - 3vw) 0, 100% 100%, 0 100%);
}
<div class="box">
</div>
如果您想要一种更受支持的方法,则可以考虑以下多种背景:
If you want a more supported way, you can consider multiple background like below:
.box {
height: 100px;
margin:5px;
padding-top:3vw;
background:
/*a triangle shape on the padding-top area*/
linear-gradient(to bottom var(--d,left),transparent 48%,red 50%) top/100% 3.1vw no-repeat,
/*color the content and not the padding-top*/
linear-gradient(red,red) content-box;
}
<div class="box">
</div>
<div class="box" style="--d:right">
</div>
这篇关于如何为倾斜的边缘使用剪切路径?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文