Способы создания деформированных фигур на css

Question

Всем привет! Есть задача замутить что то вроде такой фигуры:

Не однократно натыкался на такие но все никак не доходили руки разобраться как их делать. Случайно нашел вот такой сайт https://bennettfeely.com/clippy/ где можно генерировать clip-path, но в таком случае нельзя коректно скруглить углы, потому что clip-path просто "обрезает" блок давая ему искривленный вид, а не деформирует сам блок. В итоге у меня вышло что то типо этого

.col-lg-2 {
    padding: 20px;
}
#test-circle6 {
    margin: 20px;
    width: 200px;
    height: 200px;
    border-radius: 20px;
    background: #AC55D9;
    clip-path: polygon(0 10%, 100% 0, 100% 88%, 0% 100%);
    
}

<div class="row">
        <div class="col-lg-2">
            <div id="test-circle6"></div>
        </div>
    </div>

Может знаете какие либо способы, или сторонние сайты/ресурсы для генерации подобных фигур? Ну или обьясните как правильно их делать? Спасибо за ранее!

Answer 1

Развлекайтесь...

body {
  display: flex;
  perspective: 200px;
}

div {
  width: 200px;
  height: 150px;
  background-color: magenta;
  margin: auto;
  border-radius: 20px;
  transform: rotate3d(2, -1, 0, 25deg);
}

<div></div>

БЛОГ НА HUSL

Способы создания деформированных фигур на css

Ответы (1 шт):