Как я могу наклонить каждую сторону элемента под разными углами? [дубликат] ⇐ CSS

[Anonymous]

Я пытаюсь добиться такого макета:


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

Код: Выделить всё

  .skew-banner {
position: relative;
background-color: #ef4444; /* bg-red-500 */
padding: 0.5rem 2rem; /* px-8 py-2 */
color: white;
font-size: 1.875rem; /* text-3xl */
font-weight: bold;
transform: skewX(-20deg);
}
.unskew-text {
transform: skewX(20deg);
display: inline-block;
}

Код: Выделить всё

How The Program Works

Подробнее здесь: https://stackoverflow.com/questions/787 ... ent-angles