Как я могу использовать Clip-Path для наклонных краев? - PullRequest
Новая
       39

Как я могу использовать Clip-Path для наклонных краев?

0 голосов
/ 05 марта 2019

В настоящее время используется этот CSS для нижнего уклона, идущего вверх слева направо: 

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

Он очень хорошо работает для адаптивного решения, но ему трудно понять, как это сделать для адаптивного решения.для наклона в верхней части дивана, идущего вниз слева направо.

Я пробовал это: 

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

Спасибо!

1 Ответ

0 голосов
/ 05 марта 2019

Вы можете настроить, как показано ниже.Вы делаете вторую точку, чтобы начать опускаться ниже на 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>
...