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

Question

[Евгений Журов]

Для заголовков блока нужно сделать эффект, как на скрине. Долго возился со всевозможными трансформациями - rotate, skew, translate и пр., но либо так и не нащупал нужные параметры, либо это все-таки невозможно. Удается задать нормально положение этого треугольника при определенной ширине, но при растягивании экрана все начинает плыть. Вероятно, разумней, на все забить и сделать svg, Но в svg мало знаком, буду дольше разбираться, а сделать нужно довольно срочно. Есть ли какое-то решение на css?

Answer 1

[Максим Тимофеев]

У Вас обычный блок, у которого есть псевдоэлементом before с треугольником из border:
htmlbook.ru/blog/treugolniki-cherez-css

Comments

[Евгений Журов]

В том-то и дело, что такой способ - не совсем резиновый. Точнее, его можно сделать резиновым, но есть нюансы. Первый параметр в border можно задать только в px, в процентах - нельзя. Можно присвоить одновременно left: 0 и right: 0 - тогда границы разъезжаться не будут, но вершина угла все равно будет съедаться при растягивании.

[Максим Тимофеев]

Евгений Журов, растяните с помощью transform

[Евгений Журов]

Максим Тимофеев, через transform не очень вижу, как именно. В итоге задал border в vw, вроде адекватно выглядит в конкретном случае.

[Максим Тимофеев]

Евгений Журов, vw - отличные единицы, но надо быть аккуратнее, так как:
caniuse.com/#search=vw
Почему не %?

[Евгений Журов]

Максим Тимофеев, Почему-то невозможно задать в процентах, браузер не воспринимает их применительно к border. Говорит, "invalid property value". А вот vw - без проблем))