Как реализовать скос у блока?

Question

[ForSureN1]

Добрый день, не могу реализовать скосы у блоков. Любой способ подойдет.

https://codepen.io/forsuren1/pen/KKqojRg

Answer 1

[archelon]

в первом приближении так:

.registration__step-item:after {
    content: "";
    background-color: #fff;
    display: block;
    position: absolute;
    width: 10px;
    height: 100%;
    right: -7px;
    top: 0;
    transform: skew(10deg);
  }

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

Answer 2

[idShura]

Вот пример Skew one side of element