我想要有一个稍微旋转的线来分隔我的网站内容,但当我试图旋转<hr>
线时,它永远不会正确结束,留下难看的间隙.
我怎样才能得到贯穿整个屏幕的线条?
.dividingline {
transform: rotate(-5deg);
overflow: hidden;
}
<div class="dividingline">
<hr style="margin-top: 50px; margin-bottom: 0px; width:200%; position:relative; left:-1200px; border-width:10px; border-style: solid; border-color: #e82010; border-radius: 24px; background-color:#e82010; height:30px">
<hr style="margin-bottom: 0px; margin-top: 0px; width:200%; position:relative; left:-1200px; border-width:10px; border-style: solid; border-color: #fe5b20; border-radius: 24px; background-color:#fe5b20; height:30px">
<hr style="margin-bottom: 50px; margin-top: 0px; width:200%; position:relative; left:-1200px; border-width:10px; border-style: solid; border-color: #f26c8f; border-radius: 24px; background-color:#f26c8f; height:30px">
</div>