Как стилизовать данную фигуру?

Question

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

Как корректно стилизовать данную фигуру, так как не получается реализовать правый наклон фигуры, он отличается от левого.
<div class="contribution__block"></div>

.contribution__block {
    max-width: 485px;
    width: 100%;
    height: 223px;
    background-color: #D9D9D9;
    border-radius: 25px;
    transform: skew(-10deg);
}

Comments

[Ivan Ustûžanin]

сделать из прямоугольника в 2Д не получится, тут нужны неафинные преобразования, которые могут получится в 3Д при использовании перспективы, но размер тогда будет примерным

или не парится и сделать такое в SVG

[Ankhena]

На базе вот этого можно попробовать, если красный тоже наклонить. И добавить обертку для текста. Либо текст вынуть и прибить сверху. Только гридом, а не абсолютом.
https://jsfiddle.net/Ankhena/bo2d1ug7/1/

[Ivan Ustûžanin]

ещё придумал: не склонять прямоугольник напрямую, а склонять его ::before и ::after с соответствующим позиционированием и размерами — если фон у блока однородный, то должно выйти относительно нормально
это на случай, если в блоке нужен несклонённый текст

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

Ankhena, подскажите как мне наклонить правую сторону чтобы получилось как на фото ?
https://jsfiddle.net/8v5ypqxu/

Answer 1

[ksnk]

Рисуешь то, что тебе нравится в редакторе, например здесь https://yqnn.github.io/svg-path-editor/
потом получившийся path вставляешь в clip-path
Как-нибудь так

Тут проблема в том, что закругления будут делаться не совсем окружностями, и нужна точность в проведении линий. Но редактор довольно удобен для рисования всяких разных фигур.

Answer 2

[Aetae]

transform: matrix3d