html - 如何将 Clip-Path 用于倾斜边缘?
问题描述
目前使用这个 CSS 来实现从左到右的底部倾斜:
clip-path: polygon( 0 0, 100% 0, 100% calc(100% - 3vw), 0 100% );
它对于响应式解决方案非常有效,但很难弄清楚如何为响应式解决方案执行此操作,以便 div 顶部从左到右向下倾斜。
我试过这个:
clip-path: polygon( 0 0, 100% calc(100% - 29vw), 100% 100%, 0 100% );
谢谢!
解决方案
你可以像下面这样调整。你把第二个点从低点开始,3vw
然后把另一个点放回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>
如果你想从右到左,就像这样:
.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>
如果您想要一种更受支持的方式,您可以考虑多个背景,如下所示:
.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>