С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, обновлено 29.08.2019 3813

Поделится

Темы

CSS HTML SVG

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

Подчеркивание текста можно сделать с помощью нескольких свойств CSS - background-image, background-size и...
К сожалению разработчики прекратили поддержку и разработку проекта, но PHPExcel все равно остается популярной...
Для модальных окон есть множество плагинов такие, как fancybox, Twitter Bootstrap и т.д. Но бывают случаи когда нет...
Ниже приведён список MIME-заголовков и расширений файлов. В PHP скриптах, перед отправкой файлов в браузер,...
В статье представлены различные PHP расширения для чтения файлов XLS, XLSX. Описаны их плюсы и минусы, а также примеры...
Первыми тегами для зачёркнутого текста были strike и s. C приходом HTML 4 их использование стало осуждается, а в HTML 5...