СSS стили для горизонтальных линий

Сборник горизонтальных линий с тегом <hr> разных видов и стилей.

1
<hr class="hr-line">

<style>
.hr-line {
	margin: 20px 0;
	padding: 0;
	height: 0;
	border: none;
	border-top: 1px solid #333;
}
</style>
HTML

Двойная линия

<hr class="hr-double">

<style>
.hr-double {
	margin: 20px 0;
	padding: 0;
	height: 1px;
	border: none;
	border-top: 1px solid #333;
	border-bottom: 1px solid #333;
}
</style>
HTML

Многострочная линия

<hr class="hr-multiline">

<style>
.hr-multiline {
	margin: 20px 0;
	padding: 0;
	height: 20px;
	border: none;
	color: #333;
	background-image: linear-gradient(currentColor, currentColor 33.33%, transparent 33.33%, transparent 100%);
	background-size: 100% 3px;
}
</style>
HTML

Двухцветная линия

<hr class="hr-two-color">

<style>
.hr-two-color {
	margin: 20px 0;
	padding: 0;
	height: 0;
	border: none;
	border-top: 2px solid #ddd;
	border-bottom: 2px solid #000;
}
</style>
HTML

Трехцветная линия

<hr class="hr-three-color">

<style>
.hr-three-color {
	margin: 20px 0;
	padding: 0;
	height: 2px;
	border: none;
	border-top: 2px solid #ddd;
	border-bottom: 2px solid #000;
	background: orange;
}
</style>
HTML

Горизонтальный градиент

<hr class="hr-horizontal-gradient">

<style>
.hr-horizontal-gradient {
	margin: 20px 0;
	padding: 0;
	height: 6px;
	border: none;
	background: linear-gradient(45deg, #333, #ddd);
}
</style>
HTML

Вертикальный градиент

<hr class="hr-vertical-gradient">

<style>
.hr-vertical-gradient {
	margin: 20px 0;
	padding: 0;
	height: 10px;
	border: none;
	background: linear-gradient(180deg, orange, blue);
}
</style>
HTML

Линия с тенью

<hr class="hr-shadow">

<style>
.hr-shadow {
	margin: 20px 0;
	padding: 0;
	height: 10px;
	border: none;
	border-top: 1px solid #333;
	box-shadow: 0 10px 10px -10px #8c8b8b inset;
}
</style>
HTML

Замыленная линия

<hr class="hr-washed">

<style>
.hr-washed {
	margin: 20px 0;
	padding: 0;
	height: 0;
	border: none;
	box-shadow: 0 0 10px 1px black;
}
</style>
HTML

Линия «Полка»

<hr class="hr-shelf">

<style>
.hr-shelf {
	margin: -30px auto 10px;
	padding: 0;
	height: 50px;
	border: none;
	border-bottom: 1px solid #1f1209;
	box-shadow: 0 20px 20px -20px #333;
	width: 95%;
}
</style>
HTML
2
<hr class="hr-dashed">

<style>
.hr-dashed {
	margin: 20px 0;
	padding: 0;
	height: 0;
	border: none;
	border-top: 2px dashed #ddd;
}
</style>
HTML

Пунктирная линия с фоном

<hr class="hr-dashed-bg">

<style>
.hr-dashed-bg {
	margin: 20px 0;
	padding: 0;
	height: 0;
	border: none;
	border-top: 2px dashed #ddd;
	background: #999;
}
</style>
HTML

Пунктирная линия с градиентом

<hr class="hr-dashed-gradient">

<style>
.hr-dashed-gradient {
	margin: 20px 0;
	padding: 0;
	height: 2px;
	border: none;
	background: linear-gradient(to right, transparent 50%, #fff 50%), 
				linear-gradient(to right, blue, red);
	background-size: 16px 2px, 100% 2px;
}
</style>
HTML
3
<hr class="hr-dotted">

<style>
.hr-dotted {
	margin: 20px 0;
	padding: 0;
	height: 0;
	border: none;
	border-top: 2px dotted #ddd;
}
</style>
HTML

Линия из крупных точек

<hr class="hr-circle">

<style>
.hr-circle {
	margin: 20px 0;
	padding: 0;
	height: 0;
	border: none;
	border-width: 0 0 5px;
	border-style: solid;
	border-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 1" width="8" height="4"><circle fill="orange" cx="1" cy="0.5" r="0.5"></circle></svg>') 0 0 100% repeat;
	background-position: 50%;
	box-sizing: border-box;
	color: orange;
}
</style>
HTML
4

Вертикальные линии

<hr class="hr-vertical-lines">

<style>
.hr-vertical-lines {
	margin: 20px 0;
	padding: 0;
	height: 10px;
	border: none;
	color: orange;
	background-image: linear-gradient(90deg, orange, orange 33.33%, transparent 33.33%, transparent 100%);
	background-size: 3px 100%;
}
</style>
HTML

Линии под углом

<hr class="hr-sloping-lines">

<style>
.hr-sloping-lines {
	margin: 20px 0;
	padding: 0;
	height: 10px;
	border: none;
	box-sizing: border-box;
	background-position: 50%;
	color: orange;
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="3px" height="3px" viewBox="0 0 3 3" fill="orange"><polygon points="0,0.5 0,1.5 1.5,3 2.5,3"></polygon><polygon points="2.5,0 1.5,0 3,1.5 3,0.5"></polygon></svg>');
	background-size: 6px 6px;
}
</style>
HTML

Наклонные линии

<hr class="hr-inclined-right">

<style>
.hr-inclined-right { 
	margin: 25px 0 40px 0;
	padding: 0;
	height: 0;
	border: none;
	border-top: 1px solid #333;
	transform:rotate(-2deg);
}	
</style>
HTML
<hr class="hr-inclined-left">

<style>
.hr-inclined-left { 
	margin: 25px 0 40px 0;
	padding: 0;
	height: 0;
	border: none;
	border-top: 1px solid #333;
	transform:rotate(2deg);
}	
</style>
HTML
04.09.2018, обновлено 09.04.2021
127719

Комментарии 2

Zag Zag
6 апреля 2020 в 23:43
А можно в линиях под уголом сам угол поменять?
Vladimir Larikhin Vladimir Larikhin
1 апреля 2023 в 20:33
да, число у deg меняйте:
transform:rotate(2deg);
и угол изменится

, чтобы добавить комментарий.

Другие публикации

Подчеркивание текста линией с градиентом
Подчеркивание текста можно сделать с помощью нескольких свойств CSS - background-image, background-size и...
9616
+1
Фильтры Instagram на CSS
Сборник CSS стилей с эффектом фильтров Инстаграма.
6740
0
Текст с градиентом
Градиент в цвет шрифта можно добавить с помощью CSS свойства background-clip: text, которое окрашивает текст в цвет или изображение указанного в background-image.
47022
+6
Модальное окно на затемненном фоне
Для модальных окон есть множество плагинов такие, как fancybox, Twitter Bootstrap и т.д. Но бывают случаи когда нет...
67792
+23
Вывод PHP-массива колонками
Несколько примеров как вывести одномерный PHP-массив в виде таблицы, плиток и списком в несколько колонок. Имеем массив городов...
18496
+3
Contenteditable – текстовый редактор
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
43179
+34