Как сделать диагональную линию между двумя div?

Question

[Programmir]

Уже восемь часов пытался сделать диагональ между двумя блоками, но так и не получилось. Пробовал через skew. Есть два блока, разделенные диагональной линией в сорок градусов. Два блока как табы, по ним можно кликать. У выбранного блока другой background, появляется border сверху, а у неактивного таба border снизу. То есть, border сверху доходит до диагональной линии, она потом идет вниз по диагонали и касается border снизу у неактивного таба.

Comments

[Сергей delphinpro]

Лучше один раз увидеть =)
Картинки приложи

[one_day]

было недавно на тостере

[massef]

https://codepen.io/sheridanms/pen/wnvCc

[Alex XYZ]

А обязательно делать это именно CSS? Параметризация не всегда уместна.

[Programmir]

Захаров Александр, да мне хоть и на jquery сойдёт. а на чём ещё делать?

[Programmir]

massef, на картинке по-другому же

[Alex XYZ]

Programmir,
1. Забить и сделать вертикальную черту.
2. Сделать в виде background.
3. Сделать всю строку на SVG по примеру: davidlynch.org/projects/maphilight/docs/demo_simpl...


Не то чтобы я хотел вам посоветовать что-то плохое и усомниться в ваших возможностях. Сам иногда ловлю себя на мысли, что "должно же работать именно так", но когда затрачиваемые усилия на какую-то линию начинают быть сравнимыми по сложности с проектом, по-моему это перебор. Или оставьте эту проблему на потом. У меня так некоторые проблемы решаются через полгода, год. Вчера, например, нашёл решение одной занозе в WPF/WinForms, которая меня доставала ГОД. Я даже и не надеялся уже. Я же не мог остановить работу на год?

Вот немного погуглил в направлении SVG:

https://stackoverflow.com/questions/39553105/drawi...

Answer 1

[display: block]

https://codepen.io/anon/pen/KXMyYg

Answer 2

[Сергей Соколов]

Что не получилось со skew? Вроде, можно подобрать skewY и translateY:
fiddle

Или просто активному до- и после- пририсовывать по бокам «уши».

Comments

[Programmir]

поставил border 1px, съехало.

[Сергей Соколов]

Programmir, разумеется, съехало.

А подобрать параметры?

[Programmir]

Сергей Соколов, под диагональю всё закрашено, а мне нужно только до нижней границы блока

[Сергей Соколов]

Programmir, вопрос ваш только про линию. Закраска блоков тут для понятности, как и толщина линии.