Sn0wSky

Я бы так сделал codepen.io/anon/pen/zoNajp

Внутри три блока, и у каждого еще отросток (:before) в нужную сторону уходит за предела экрана.

В чистом Sublime никак, надо устанавливать доп расширения.
https://github.com/rareyman/HTMLBeautify - это, например.

А как устанавливать расширения - гуглится за 10 сек

Ну Вы transition засунули в :hover скорее всего, а надо в исходный без :hover'a

https://jsfiddle.net/814646ey/

Цвет border-right замените на цвет фона
Высоту border-top и border-bottom на половину высоты Вашего блока
А с шириной border-right поиграйтесь так, чтобы он выпирал на столько, на сколько Вам нужно (если задать то же самое число, что и в border-top/border-bottom, получите прямой угол)

UPD.: Ярослав верно заметил, но можно обойтись без svg, даже если нужна прозрачность
https://jsfiddle.net/814646ey/2/

Я чего-то не понимаю?

var str = "";
for (var i = 1; i<7; i++){
    str += "#";
    console.log(str);
}

<meta name="viewport" content="width=device-width, initial-scale=1.0">

в head добавте

может просто hasAttribute не принимает второго параметра, и отрабатывает всегда первый случай, говорящий, что "id" существует, не сравнивая ни с чем?
www.w3schools.com/jsref/met_element_hasattribute.asp

opacity: 0;
у
.steps_holder .circle_small_holder

У вас стоит какая-то анимация появления, которая запускается js'ом, который не срабатывает

wp-kama.ru/function/get_ancestors

Подставляйте туда текущую категорию и получите всех родителей

Не разделяя один блок на две части, мне кажется разве что через canvas

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