Здесь создаем 2 цветных горизонтальных линий, где по центру будет написано название или ключевое слово. Где изначально такой стиль больше похоже на кнопку, ведь у каждой линий задана своя длина. Что теперь можно применить в дизайне на сайте, а также применение тега hr здесь не нужно, все выполнено на чистом стиле.
HTML
Код
<h3>ZorNet - портал для вебмастера</h3>
CSS
Код
h3 {
display: table;
margin: 0 auto;
padding: 8px 28px;
transform: skew(-10deg);
box-shadow: 0 0 5px rgb(251, 251, 251);
position: relative;
}
h3:before {
content: "";
position: absolute;
border-top: 2px solid #1a7cd2;
border-bottom: 2px solid #1d85ce;
transform: skew(10deg);
left: 5%;
right: 5%;
top: -2px;
bottom: -2px;
}
Демонстрация
