有人知道如何寫與上圖完全相同的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)
}<h2 class="divider">Testing</h2>uj5u.com熱心網友回復：
為什么不使用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;
}<h2 class="divider">Game List</h2>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/337329.html
標籤：css