Наклонить только один угол деления

Question

Мне нужно потянуть только правый нижний угол разделенного героя вниз.Я перепробовал все конфигурации перекоса и поворота.

https://codepen.io/alecfried/full/pmvLMw

<div class="position-relative" style="min-height: 400px; background: purple; width: 100%;transform-origin: bottom; transform: skewX(-17deg); overflow: hidden;"> </div>

Answer 1

Вот еще одно решение (после вашего комментария).Хотя я не удалил, этот <div class=" wrapper "> не имеет здесь никаких обязанностей.

.wrapper {
  width: 100%;
  /* may remove width:100%, as div is always 100% */
  margin: 0 auto;
  overflow: hidden;
}

.position-relative {
  min-height: 400px;
  background: purple;
  width: 100%;
  /* may remove width:100%, as div is always 100% */
  /* transform-origin: bottom; */
  /* transform: skewX(-17deg); */
  -webkit-clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 80%);
  clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 80%);
}

<div class="wrapper">
  <div class="position-relative"> </div>
</div>

О пути к клипам вы можете получить визуальный пример на clippy

Answer 2

Да! Это достижимо, но вам может потребоваться применить этот тип трюка! :)

.wraper {
        width: 100%; /* may remove width:100%, as div is always 100% */
        margin: 0 auto;
        overflow: hidden;
    }
    
    .position-relative {
        min-height: 400px;
        background: purple;
        width: 100%; /* may remove width:100%, as div is always 100% */
        transform-origin: bottom;
        transform: skewX(-17deg);
    }

    <div class="wraper">
        <div class="position-relative"> </div>
    </div>