UnluckySerivelha
@UnluckySerivelha

Как сверстать прямоугольник со «стрелкой» на конце?

Нужно сверстать такую фигуру с текстом внутри:
5bfa93c8231fc758305398.png
Важно, что должен остаться border и при изменении высоты блока фигура не должна ломаться
Пытаюсь сделать срезанные углы с помощью clip-path, но border не переносится на срезанные границы.

Есть какие-то другие способы это решить?
  • Вопрос задан
  • 522 просмотра
Решения вопроса 1
@saintluka
Насколько знаю, чисто с бордерами эту задачу не решить. Мой вариант с svg-треугольником – https://codepen.io/anon/pen/wQELXZ (можно ткнуть в синий блок и вводить текст, чтобы увидеть в динамике)

По части масштабирования SVG обрати внимание на атрибут preserveAspectRatio="none" и vector-effect="non-scaling-stroke"
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы