Как четырехугольник разделить по диагонали?

Question

[Eugene]

Возможно это кое-кому покажется странным, но разделить его, короче, по диагонали,
это с целью получить две треугольных кнопки, типа "да/нет" и вот, если высота и ширина четырехугольника строго заданны, то можно достигнуть через transform и overflow:hidden, или даже извращаясь с borderами, а хотелось бы того же, но с ресайзовым, блин, четырехугольником, ну, чтоб он плющился, а диагональное деление сохранялось, мне представляется, что в принципе такое возможно, но получится какая-то уж слишком сложная хрень, кажется для этого нужно хорошо знать теорему Пифагора :) - ну там, гипотенузы, катеты, проценты, чего-то вычислять в сalc(), но теоретически ведь такое возможно в css, да?

Answer 1

[DTX]

border-top: 100px solid #f00;
border-right: 50vw solid #0f0;

codepen.io/anon/pen/OXRbBv

Upd:
Ладно, тогда clip-path)

codepen.io/anon/pen/jrMBZw

Comments

[Eugene]

Прекрасно, дружище, но речь шла о кликабельности и ресайзе, и, не говоря уже о ресайзе, вы предлагаете кликать border-top и border-right, круто конечно :) но эту задачу не решить, увы, может только в будущем, в css4 :)

[DTX]

blasheevich: ну, с кликабельностью проблем нет, а вот про ресайз задумался уже после ответа. Жаль, проценты в бордерах не работают..

[DTX]

но задачка интересная, надо прост ещё подумать)

[DTX]

blasheevich: готово) vw спасает)

Answer 2

[Андрей Федоров]

Как вы в calc sqrt собрались вычислять? Это к слову о теореме Пифагора. )
codepen.io/aliencash/pen/oLzLxe

Comments

[Eugene]

Не, путём грязного хака собирался сделать :) ведь длинна гипотенузы не важна, которая сторона дочернего повёрнутого прямоугольника, центр поворота известен, но, блин, облом, в transform: rotate могут быть только градусы, радианы, еще какая-то неведомая хрень, но никак не проценты :)
Да, блин, не получится :(

Answer 3

[Eugene]

Фига-се! Но дело в том что на один и тот же border нельзя повесить две ссылки, увы :)

Comments

[DTX]

Надежда умирает последней) Чуть выше clip-path с ховером)