Доброго времени суток!

Хочу сделать на странице сайта красивый переход линией в форме домика. Пример на картинке: http://i[dot]imgur[dot]com/1GClKtD[dot]png

Подскажите, пожалуйста, как это правильно реализовать? По какому запросу гуглить хотябы? Я испробовал множество разных запросов типа "красивый переход", "разделитель" и т.п. - нашлись одни мигающие гирлянды и ничего более.

Я знаю, что реализовать это возможно с помощью картинки, на которой будет изображен этот переход - прописать верхнему блоку свойство background-image и прикрепить эту картинку снизу. Однако, нигде не могу найти подходящей картинки, т.к. опять же - не знаю как это правильно называется и не знаю по каким запросам искать в поисковиках.

Для того, чтобы нарисовать самому, опыта видимо еще маловато. Сделать линии идеально асимметричными - не проблема, но вот линии из-за наклона становятся пиксельными, т.е. в форме лесенки (делал в Photoshop с помощью фигуры "Линия"). Не знаю, как это исправить...

Буду благодарен за подсказку, в каком направлении рыть. Спасибо!

https://jsfiddle[dot]net/5b66jazq/

armancho7777777
Большое спасибо!

А вам случаем не известно, как правильно называется это решение? Ну чтобы в гугле можно было например набрать и наткнуться на подобные варианты (не только домиком, но и змейкой, например, и другие)?

Пожалуйста.
Полагаю "css geometric shapes"

armancho7777777
Спасибо!

Тут еще скинули ссылки, может в будущем кому пригодиться:
https://codepen[dot]io/ibrahimjabbari/pen/ozinB
http://tympanus[dot]net/Development/[dot][dot][dot]ctionSeparators/