在CSS中繪制有角度的線條

Question

我正在嘗試做的事情看起來很簡單，但我似乎無法弄清楚如何去做。

正如您在我的圖像中看到的那樣，有幾條紅線穿過底部，然后向上彎曲靠近右側。

在CSS中有一種方法可以繪制這樣的線條嗎？

Answer 1

您可以使用傾斜變換（ transform: skew(Xdeg) ）在CSS中創建有角度的線。 以下是一個示例代碼段：

 .shape { height: 50px; width: 200px; border-bottom: 2px solid red; border-right: 2px solid red; -moz-transform: skew(-45deg); -webkit-transform: skew(-45deg); transform: skew(-45deg); } 

 <div class="shape"></div> 

---

內容區域上方有一個雙線，后面有一個雙線也可以使用單個元素（和幾個偽）完成，如下面的代碼片段所示：

 .shape:before { position: absolute; bottom: -5px; left: -5px; content: ''; height: 50px; width: 100%; border-bottom: 3px solid red; border-right: 4px solid red; -webkit-transform: skew(-45deg); -moz-transform: skew(-45deg); transform: skew(-45deg); } .shape:after { position: absolute; content: ''; bottom: -10px; left: 0px; height: 55px; width: 100%; border-bottom: 3px solid red; border-right: 4px solid red; -webkit-transform: skew(-45deg); -moz-transform: skew(-45deg); transform: skew(-45deg); z-index: -1; } .shape { position: relative; height: 80px; width: 400px; background: whitesmoke; } 

 <div class="shape"> Some text that goes within the element... </div>