如何将 Clip-Path 用于倾斜边缘？答案

【问题标题】：How can I Use Clip-Path for slanted edges?如何将 Clip-Path 用于倾斜边缘？
【发布时间】：2019-03-04 22:22:22
【问题描述】：

目前使用这个 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%  );

谢谢！

【问题讨论】：

标签： html css clip-path

【解决方案1】：

你可以像下面这样调整。您将第二点从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>

【讨论】：