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

04.09.2018

146168

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

Сплошные линии

<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

Пунктирные линии

<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

Точечные линии

<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

Разное

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

<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