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

Question

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

Answer 1

Если "поиграться" с этими значениями, можно подогнать что-то похожее.

body {
  padding: 100px;
}

.decoration-box {
  pointer-events: none;
  border-top: 70px solid purple;
  border-right: 70px solid purple;
  width: 200px;
  height: 200px;
  transform: rotate(-15deg) scale(1.3);
  filter: blur(65px);
  
}

<body>
  <div class="decoration-box"></div>
</body>

Но всё же, я бы вам рекомендовал скачать эту картинку как png и установить как фон

UPD
Либо ещё такой вариант:

body {
  padding: 100px;
}

.decoration-box {
  pointer-events: none;
  display: flex;
  transform: rotate(20deg) scale(2);
  filter: blur(30px);
  margin: 100px;
}

.decoration-box__line {
  background-color: purple;
  height: 45px;
  width: 120px;
}

.decoration-box__line:first-child {
  transform: rotate(-25deg);
  margin-right: -10px;
}

.decoration-box__line:last-child {
  transform: rotate(25deg);
}

<body>
  <div class="decoration-box">
    <div class="decoration-box__line"></div>
    <div class="decoration-box__line"></div>
  </div>
</body>

Но вариант с png лучше

БЛОГ НА HUSL

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

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