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

Question

[Dymok]

Нужно сверстать такую фигуру с текстом внутри:

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

Есть какие-то другие способы это решить?

Comments

[Hyubert]

Сделайте квадрат и переверните на 45 градусов чтобы получился ромб, потом спозицинируйте так чтобы половина ромба перекривалась основной областю.

[Dymok]

Hyubert, а как сделать высоту ромба равной высоте прямоугольника?

[Hyubert]

Dymok, вам нужно чтобы было адаптивно?

[Hyubert]

Dymok, если с clip-path то посмотрите это

[MFNIK]

Пишу на коленках....
А не получится диву который квадрат через afrer прописать этот треугольник?
Как сделать треугольник htmlbook.ru/blog/treugolniki-cherez-css
А потом с помощью position: absolute выровнять как нужно, например сделав after высотой с див к которому будешь подставлять треугольник, и сделать по центру ( margin-top:-половину высоты after).
А и не забудь диву позишн релативе!!

[Dymok]

MFNIK, в таком случае высота треугольника будет фиксированной, это не подходит

[MFNIK]

Dymok, ну если плясать от дива:after к которому «приклеивать» треугольник, то высота будет точно такая же как у дива, помоему.
Height:100%

[MFNIK]

Был бы комп под рукой я бы прислал решение, а так в полевых условиях пишу.

[Dymok]

MFNIK, треугольнику, сделаному с помощью CSS нельзя просто задать высоту свойством height, его размер зависит от border'a у элемента after

.block {
    background: green;
    border-radius: 10px;
    padding: 20px;
    position: relative;
    color: #fff;
   }
   .block::after {
    content: ''; 
    position: absolute; /* Абсолютное позиционирование */
    left: 20px; bottom: -20px; /* Положение треугольника */
    border: 10px solid transparent; /* Прозрачные границы */
    border-top: 10px solid green; /* Добавляем треугольник */
   }

[MFNIK]

Согласен упустил этот момент, пока больше идей нет(((

Answer 1

[saintluka]

Насколько знаю, чисто с бордерами эту задачу не решить. Мой вариант с svg-треугольником – https://codepen.io/anon/pen/wQELXZ (можно ткнуть в синий блок и вводить текст, чтобы увидеть в динамике)

По части масштабирования SVG обрати внимание на атрибут preserveAspectRatio="none" и vector-effect="non-scaling-stroke"

Comments

[Dymok]

Спасибо. Самый простой и эффективный вариант.