How can I Use Clip-Path for slanted edges?

青春壹個敷衍的年華 提交于 2021-02-16 21:26:20

问题


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%  );

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.

I tried this:

clip-path: polygon(    0 0,    100% calc(100% - 29vw),    100% 100%,    0 100%  );

Thank you!


回答1:


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>

On the sides:

.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>


来源:https://stackoverflow.com/questions/54992498/how-can-i-use-clip-path-for-slanted-edges

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!