Как через стили добиться разные градусы углов у слоя?

Question

[foxayb]

На сайте есть картинки, пример:

Хочу реализовать их через стили CSS, пробую так:

.info-list:before {
    content: '';
    position: absolute;
    top: -5px;
    left: 25px;
    right: 0;
    bottom: -7px;
    background-color: #ac39aa;
    z-index: -1;
    -webkit-transform: skew(-8deg);
    -ms-transform: skew(-8deg);
    -o-transform: skew(-8deg);
    transform: skew(18deg);
    -o-transition: .3s background ease,.3s border ease;
    transition: .3s background ease,.3s border ease;
}

Но выходит не совсем то (получается повернуть только под одним градусом). Подскажите другой способ. Спасибо!

Answer 1

[Stalker_RED]

Там можно передавать два параметра
https://developer.mozilla.org/ru/docs/Web/CSS/tran...
(аналог skewX() и skewY())
А еще есть transform: perspective(), transform: rotate3d() и transform: matrix3d()
Этого достаточно для того чтобы задать любую нужную вам форму.

Answer 2

[foxayb]

https://habr.com/post/126207/ нагулил. но может есть что-то интересное ещё?