Как создать такую форму элемента?

Question

[vlad1552333]

Важно что бы фон входил в выпирающую область.

Answer 1

[Дима Долготер]

https://stackoverflow.com/questions/26697760/clip-...

Answer 2

[Владислав Афанасьев]

Поиграйся с настройками только

.elem{
  width: 50px;
  height:50px;
  position: absolute;
  z-index: -1;
  width: 240px;
  height: 240px;
  background-image: url('yaga.jpg') ;
  transform: scale(1.5,0.26) rotate(45deg);
  border-bottom-left-radius: 350px;
  border-top-right-radius: 350px;
  border-top-left-radius: 250px;
  left: 100px;
}

Информацию можно тут найти : https://html5book.ru/nestandartnye-bloki-na-sayte/

Answer 3

[Вадим Кот]

clip-path с svg https://developer.mozilla.org/en-US/docs/Web/CSS/c...
или svg маска https://developer.mozilla.org/ru/docs/Web/SVG/Tuto... или паттерн https://developer.mozilla.org/ru/docs/Web/SVG/Tuto...

Answer 4

[Александр Алексеев]

как говорят выше clip-path или mask
по сылке ниже приведены все варианты использования этой технологии
можно открыть в разных браузерах и посмотреть как срабатывает
внизу страницы написаны рабочие кроссбраузерные варианты
https://lab.iamvdo.me/css-svg-masks/