Замечания: Этот вопрос о проблеме с выводом, ине о создании любой формы.

Я недавно создал форму:

.prog {
    position: relative;
    top: 20px;
    width: 150px;
    height: 120px;
    background: green;
    display: inline-block;
    transform: skewY(20deg);
    transform-origin: 0% 100%;
    transition: 0.8s ease;
}
.prog:before {
    content: "";
    position: absolute;
    left: 150px;
    width: 150px;
    height: 120px;
    background: red;
    transform: skewY(-40deg);
    transform-origin: 0% 100%;
    transition: 0.8s ease;
}

<div class="prog "></div>

В приведенном фрагменте зеленая форма.prog элемент, и перекошен. Красная форма:before псевдоэлемент первого элемента.

Я перекосил.prog (косо) до 20 градусов. Теперь мне нужно:before быть -20 градусов Для этого мне сначала пришлось его расколоть. Затем наклоните его еще на 20 градусов.
ИтоговыйskewY значение будет -40 градусов. Я применил это, и соответствующийtransform-origins.

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

Черные линии только для справки.

Теперь еще больше!

Я перекосил-20 -20 вместо-40 :

transform: skewY(-20deg) skewY(-20deg); <-- Это работает!
transform: skewY(-40deg); <---------------- Это не так!