Как сделать сложную фигуру с помощью CSS?

Question

Возможно ли создать такую форму используя только CSS

Answer 1

https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator

Если вы согласны на компромисный вариант.

Answer 2

Вы можете использовать mask для этой задачи.

.block {
  display: block;
  width: 177px;
  height: 63px;
  background-color: green;
  -webkit-mask: url('//i.imgur.com/QlE7nWV.png') no-repeat center center / contain;
          mask: url('//i.imgur.com/QlE7nWV.png') no-repeat center center / contain;
}

<div class="block"></div>

НО.
• Это всё так же картинка, но можно использовать SVG, чтобы не было лесенок если этот блок будет менять размеры
• У блока таргет зона будет как у "прямоугольного блока", а не по форме фигуры.
• Стоит обратить внимание на поддержку - ссылка

Answer 3

Для полного комплекта, - решение SVG

Контур фигуры рисуете в векторном редакторе.

При наведении курсора - изменение цвета

После клика переход по ссылке на раздел вопросов по CSS

.container {
width:20vw;
height:auto;
}
.path {
fill:#D12036;
}
.path:hover {
fill:yellowgreen;
}

<div class="container">
<a href="https://ru.stackoverflow.com/questions/tagged/css" >
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" preserveAspectRatio="xMinYMin meet"  id="svg4" viewBox="0 0 180 65">
  
  <path class="path" d="M163.7 50.7c-13 6.2-28 6.6-42.3 8.7-13.3 2-26.8 2.8-40.2 3.7-10.6.8-19.9 1.4-31 .7-18.8-.7-53.6-15-47.9-37.4A30.5 30.5 0 0 1 18 8.4a49.3 49.3 0 0 1 34-6.3C57 3 62 5 67 6 73.3 7 79.7 8 86.2 8c14.8-.7 28.6-3.5 42.3-4.4 7.2-.5 14.6-1 21.7 0 10.1 1.3 21.2 3.8 26.2 12.6a26.4 26.4 0 0 1 2.2 16.8c-3 7-8.4 14.4-15 17.6z"  />
</svg>
</a>
</div>

БЛОГ НА HUSL

Как сделать сложную фигуру с помощью CSS?

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