Создание линейного градиента с углом

Question

У меня есть спецификации дизайна, которые требуют такой градиент

Я понял, как сделать наклонную линию и сдвиг цвета, ноУ меня проблемы с выполнением обоих в том же свойстве линейного градиента.

background: linear-gradient(90deg, #007bff, #0C4078); // color is right 
background: linear-gradient(178deg, white 50%, white 50%, #007bff 50%, #007bff 40%); // line angle is right

Как мне сделать мой линейный градиент похожим на спецификацию?

Answer 1

Вам нужно учесть несколько фонов:

.box {
 height:200px;
 background: 
   linear-gradient(to bottom right,#fff 49%,transparent 50%) top/100% 30%,
   linear-gradient(to right, #007bff, #0C4078);
 background-repeat:no-repeat;
}

<div class="box"></div>

Если вам нужна прозрачность, вы можете использовать clip-path с одним фоном:

.box {
 height:200px;
 background:linear-gradient(to right, #007bff, #0C4078);
 -webkit-clip-path:polygon(0 30%,0 100%, 100% 100%,100% 0);
 clip-path:polygon(0 30%,0 100%, 100% 100%,100% 0);
}

<div class="box"></div>

Вот еще один способ, если вам нужна прозрачность и лучшая поддержка, чем clip-path:

.box {
  height: 200px;
  position: relative;
  overflow: hidden;
  z-index: 0;
}

.box:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transform: skewY(-7deg);
  transform-origin: top right;
  background: linear-gradient(to right, #007bff, #0C4078);
}

<div class="box"></div>