Как лучше нарисовать скошенный блок с закруглёнными углами?

Ссылка скопирована
CSS HTML JavaScript
1 ответ

Приветствую. Есть, вроде-бы, простая задача, сделать блок с текстом, со скошенной стороной и закруглёнными углами.

Как лучше нарисовать скошенный блок с закруглёнными углами?

Проблема в том, что блок должен быть в display: inline-block, и его высота и ширина - динамическая, зависит от кол-ва текста в блоке.
Переводил svg из фигмы в clip-path, получается простыня координат, и ладно, но clip-path не справляется по высоте, скос разный везде.

Может кто подскажите, как лучше реализовать данный блок?

Дополнительно:

Какая стратегия должна применяться к скошенной стороне при адаптивности?
а) сохранение угла скоса;
б) сохранение постоянной разности длин верха и низа.

  • alexalexes, угол скоса, я думаю, будет приемлемым вариантом...
  • пихнуть svg в background пробовал?

    • Ответы:

    tranform: skew не подойдет вам? задача не совсем понятная, но скос так делается)

    • Задача вроде как понятна, есть скриншот того, что нужно.

      Если вы подскажите как сделать наклон одной стороны применив skew, я буду вам благодарен :)

    Нужно решить такую задачу?

    Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

    Заказать помощь
    Лучший ответ
    1
    Мария Код Ответ

    Для создания скошенного блока с закругленными углами можно использовать CSS. Ниже приведен пример кода на языке CSS, который можно вставить в ваш файл стилей:

    .skew-box {
  width: 200px;
  height: 100px;
  background-color: #f0f0f0;
  position: relative;
}
 
.skew-box:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -20px;
  right: -20px;
  background-color: #f0f0f0;
  transform: skewX(-20deg);
  z-index: -1;
  border-radius: 10px;
}

    .skew-box { width: 200px; height: 100px; background-color: #f0f0f0; position: relative; } .skew-box:before { content: ''; position: absolute; top: 0; bottom: 0; left: -20px; right: -20px; background-color: #f0f0f0; transform: skewX(-20deg); z-index: -1; border-radius: 10px; }

    В данном примере создается блок с классом "skew-box", который имеет ширину 200px и высоту 100px. С помощью псевдоэлемента `:before` мы создаем наклонный блок, который будет иметь цвет фона и форму, совпадающую с основным блоком, но с наклоном. Свойство `transform: skewX(-20deg)` задает наклон блока по оси X на 20 градусов. Свойство `border-radius: 10px` задает закругленные углы блоку.

    Вы можете настроить размеры, цвета и угол наклона блока, чтобы создать нужный вам дизайн. Не забудьте добавить класс "skew-box" к вашему HTML-элементу, чтобы применить стили.

    Другие ответы (0)

    Пока нет других ответов. Будьте первым, кто поможет автору.

    Ответить на вопрос

    комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *

    Вам также может быть интересно

    VPN Как правильно настроить vless для Android TV? 1 ответ Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 1 ответ печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ Аккумуляторные батареи Почему при зарядке автостарта слышен писк, где искать причину? 1 ответ