#css
Вопрос:
Кто-нибудь знает, как написать hr точно так же, как на картинке выше? Я пытался поставить clip-path: polygon(0 20%, 0 100%, 100% 100%, 100% 0%, 5% 0) , но тоже не получается
.divider { color:#1D0000; display: flex; text-transform: uppercase; align-items: center; margin: 1em -1em; } .divider:before, .divider:after { content: ""; flex: 1; border:1px solid #1D0000; margin: 0 1em; clip-path: polygon(0 20%, 0 100%, 100% 100%, 100% 0%, 5% 0) } lt;h2 class="divider"gt;Testinglt;/h2gt; Комментарии:
1. должен ли это быть именно тег lt;hrgt;? В противном случае вы могли бы создать 2 разных div для левой и правой сторон и оформить их с помощью преобразования поворота
Ответ №1:
Почему бы не использовать transform: skew() ?
.divider { color: #1D0000; display: flex; text-transform: uppercase; align-items: center; margin: 1em -1em; } .divider::before, .divider::after { content: ""; display: block; flex: 1; height: 4px; border-top: 1px solid #1D0000; margin: 0 1em; } .divider::before { transform: skewX(45deg); border-right: 3px solid #1D0000; } .divider::after { transform: skewX(-45deg); border-left: 3px solid #1D0000; } lt;h2 class="divider"gt;Game Listlt;/h2gt;