Как сверстать данный фон(background)?

Question

[Дмитрий Ярощук]

Не могу понять как сверстать данный фон(background) так как форма фигуры необычная.
Цвет элемента :

background: linear-gradient(180deg, #C91C04 0%, #4B0900 100%);

Comments

[Максим]

Нарисуйте svg..
И подключите в качестве фона

[Дмитрий Ярощук]

Максим, Подскажите а где и как можно нарисовать, так как ранее с таким не сталкивался ?

[Wispik]

Скриншот из фигмы? Там же можно эту фигуру в свг сохранить

[leeroyjenkins176]

Дмитрий Ярощук, либо сделать div с нужной формой https://bennettfeely.com/clippy/

[modelair]

на современном css можно набросать шестиугольник да повернуть его немного

.hexagon {
  height: 1000px;
  aspect-ratio: 1/cos(30deg);
  clip-path: polygon(50% -50%, 100% 50%, 50% 150%, 0 50%);
  background: linear-gradient(60deg,#bf4d28,#cc333f);
}

Answer 1

[Евгений]

Не знаю как у вас там по верстке, сделал величины относительно контейнера, лучше сделать в абсолютных величинах:

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

.container {
  position: relative;
  border: 1px solid #000;
  width: 800px; 
  height: 400px;
  overflow: hidden;
}
.fig {
  position: absolute;
  top: 0;
  left: -105%;
  width: 150%; 
  height: 150%;
  transform: skew(-20deg, -25deg);
  background: linear-gradient(180deg, #C91C04 0%, #4B0900 100%);
}

Comments

[Дмитрий Ярощук]

Евгений подскажите это можно реализовать как-то задним фоном для основного блока ?

[Евгений]

Дмитрий Ярощук, нужно сделать псевдоэлементом, а область основного контейнера можно будет ограничить паддингом, если не нужно чтобы контент налезал на этот элемент.

<div class="container fig">
  ...content
</div>

.container {
  position: relative;
  border: 1px solid #000;
  width: 800px; 
  height: 400px;
  overflow: hidden;
}
.fig::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: -105%;
  width: 150%; 
  height: 150%;
  transform: skew(-20deg, -25deg);
  background: linear-gradient(180deg, #C91C04 0%, #4B0900 100%);
}