Разделитель CSS · Полоска с ромбом в центре

Разделитель в виде полоски с ромбом

Разделитель в виде полоски с геометрической фигурой в виде ромба по центру, рисунок получен при использовании свойств css и тега <hr>, элемент разделителя обладает адаптивными свойствами.

Настройка и применение разделителя CSS

Настройка цвета и размера разделителя

hr.separator:after
background: none repeat scroll 0% 0% #000; - #000 - Цвет ромба
hr.separator
border-top: 1px solid #000; - Цвет полоски
width: 50%; - Ширина полоски

Применение разделителя

Применяем разделитель к тегу <hr>

<style>
hr.separator:after {
background: none repeat scroll 0% 0% #000;
content: "";
height: 10px;
left: 50%;
margin: -5px auto auto -5px;
position: absolute;
transform: rotate(-45deg);
width: 10px;
}
hr.separator {
border-top: 1px solid #000;
width: 50%;
clear: both;
}
</style>
<h3 class="text-center">Применяем разделитель к тегу &lt;hr&gt;</h3>
<hr class="separator">
Рейтинг: 4.9/5 из 10
Добавлено Автор Ник Источник Просмотров Комментариев Теги
13-12-2014 Михаил Меренков aTmpl © 5839 0 разделитель css, separator css, Разделитель, separator