1

Блок

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

3
  • 1
    Пост на хабре habrahabr.ru/post/126207
    – Kniha m
    9 янв 2018 в 14:13
  • 1
    Я бы просто нарисовал картинку и поставил её на фон
    – andreymal
    9 янв 2018 в 14:15
  • 3
    Если говорить о примере на вашем изображении, то тут можно обойтись свойством transform: skewX(-Ndeg);. Получим примерно такой результат
    – Deonis
    9 янв 2018 в 14:21

2 ответа 2

1

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

1

Используйте функцию 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);
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.