Как сделать границы произвольной формы?

248

11 января 2018, 20:14

Задался вопросом, как можно реализовать блок такой формы, чтобы сделать такие границы? И вообще как можно сделать непрямоугольный блок?

Answer 1

Если нужен блок формы отличной от прямоугольника и квадрата с зоной выделения то тут нужно применение svg. Если же зона выделения значения не имеет - то предложенные варианты в комментариях сгодятся.

Answer 2

Используйте функцию skew. Решение вашего вопроса - https://codepen.io/Grishko/pen/qpxXXm

<div class="skew"><span>Текст</span></div>
.skew {
  display: inline-block;
  padding: 10px 25px;
  border: 3px solid #000;
  transform: skew(-10deg);
}
.skew span {
  display: inline-block;
  transform: skew(10deg);
}