CSS怎么畫(huà)斜線？

盒模型的border屬性可以給一個(gè)元素加邊框，而且邊框可以有不同的樣式。我們可以利用邊框樣式，讓元素呈現(xiàn)出斜線的效果。下面分別介紹三種實(shí)現(xiàn)方式：

實(shí)現(xiàn)方法一：

div {
width: 0;
height: 0;
border-top: 50px solid #f00;
border-right: 50px solid transparent;
 }

實(shí)現(xiàn)方法二：

div {
position: relative;
width: 100px;
height: 100px;
 }
 div:before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border-top: 100px solid #f00;
border-right: 100px solid transparent;
 }

實(shí)現(xiàn)方法三：

div {
background: #f00;
width: 100px;
height: 100px;
transform: skewX(-45deg);
margin-left: 50px;
 }

以上三種實(shí)現(xiàn)方式，可以適用于不同的場(chǎng)景和需求。利用CSS的這種技巧，可以讓頁(yè)面呈現(xiàn)出更加炫酷的效果。