Создание наклонного градиента на div (как сверху, так и снизу) - PullRequest
Новая
       10

Создание наклонного градиента на div (как сверху, так и снизу)

2 голосов
/ 01 октября 2019

Я пытаюсь применить градиент к div, который должен выглядеть следующим образом:

enter image description here

Мне удалось выяснить, каксделайте уклон вверху, но не знаете, как этого добиться, снизу.

Текущий подход: 

.gradient{
    background: linear-gradient(188deg, #FFFFFF 24%, transparent 24%), linear-gradient(90deg, #454545 0%, #454545 100%);
}

.gap{
  height: 600px;
}
<div class="gradient">
  <div class="gap"></div>
</div>

Я пытался перевернуть градиент, то есть 

.gradient{
    background: linear-gradient(185deg, #FFFFFF 24%, transparent 24%), linear-gradient(90deg, #454545 0%, #454545 100%);
  background: linear-gradient(185deg, transparent 24%, #FFF 24%), linear-gradient(90deg, #454545 100%, #454545 0%);
}

Но это не сработало, и я не думаю, что этоправильный подход к этому (как при создании другого линейного градиента).

Ответы [ 3 ]

2 голосов
/ 01 октября 2019

ВАРИАНТ 1

HTML - 

<div class="container">
</div>

CSS- 


.container{
  width: 150px;
  height: 100px;
  transform: skewY(20deg);
  background: #454545;
}

ВАРИАНТ 2 (рекомендуется) -

HTML - 

<div class="container">
</div>

CSS- 


.container{
  width: 150px;
  height: 100px;
  clip-path: polygon(0 0, 100% 25%, 100% 100%, 0 75%);
  background: #454545;
}

Оба результата до -

enter image description here

0 голосов
/ 01 октября 2019

Разделите вашу фигуру на 3 части. Два треугольника и один прямоугольник: 

.box {
 width:300px;
 height:300px;
 background:                                             /*Position /width height*/
  linear-gradient(to top right,grey 50%,transparent 50.5%)   top    /100%  30%,
  linear-gradient(grey,grey)                                 center /100%  40%,
  linear-gradient(to bottom left,grey 50%,transparent 50.5%) bottom /100%  30%;
 background-repeat:no-repeat;
}
<div class="box">
</div>

Вот с разными цветами, чтобы лучше увидеть загадку 

.box {
 width:300px;
 height:300px;
 background:                                             /*Position /width height*/
  linear-gradient(to top right,red 50%,transparent 50.5%)   top    /100%  30%,
  linear-gradient(blue,blue)                                 center /100%  40%,
  linear-gradient(to bottom left,green 50%,transparent 50.5%) bottom /100%  30%;
 background-repeat:no-repeat;
}
<div class="box">
</div>
0 голосов
/ 01 октября 2019

Для этого вы можете использовать clip-path.

Примерно так:

clip-path: polygon (0 0, 100% 22%, 100% 99%, 0 74%);

Вот сайт, который поможет вам выбрать правильный путь: https://bennettfeely.com/clippy/

...