Как сделать адаптивный по высоте треугольник на CSS?

Question

[Cheizer]

Знатоки, подскажите пожалуйста, как сделать резиновым по высоте, треугольник на css?

Есть блок, минимальная высота 130px, в нем есть элемент треугольник. Создан на CSS.
Как его можно сделать по высоте резиновым, что бы он по ширине всегда был 50px как сейчас, а вот по высоте тянулся вместе с родительским блоком, если тот станет больше?

Comments

[Kataev]

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

[Cheizer]

KataevAS, Благодарю, но JS это перебор, можно, лучше тогда уж фоном SVG тянуть элемент.

Answer 1

[Ivan Bogachev]

В современном CSS есть замечательная штука - clip-path, которая позволяет сделать элемент нужной формы. В контексте вашей задачи это решение гораздо надежнее хаков с градиентами, т.к. будет по-настоящему тянуться на любую высоту (правда IE эту красоту не поддерживает):

Comments

[Арсений Матыцин]

Я думаю можно уже IE признать официально мертвым. Каждый раз заходя в него чот поковырять, я вижу исключительно ссылку на Edge.

[Ivan Bogachev]

Арсений Матыцин, А Edge это тоже не поддерживает. Конечно, рано или поздно, его хромиумная реинкарнация заменит все старые версии, но пока еще светлое будущее не наступило, к сожалению.

[Арсений Матыцин]

Ivan Bogachev, хм. Действительно, в крае не пашет.

Я не пробовал городить clip-path уже года три, не меньше, так как помучавшись с ним окрестил нежизнеспособным. Не только потому что имеет кривую поддержку браузерами, но в основном потому что легко заменяется на svg спрайты, которые много более гибкие в использовании.

Answer 2

[Олег]

Вариант не идеальный, но может вам подойдет

Comments

[Cheizer]

Благодарю, да не идеальный, так то отлично, просто фракталы портят решение. Как бы сгладить неровности.