CSS中的斜線效果可以通過background屬性的線性漸變實現。
background: linear-gradient(-45deg, #f9d423, #e65c00);
上面的代碼將創建一個從左上角旋轉45度的線性漸變,顏色從黃色逐漸過渡到橙色,形成斜線的效果。
如果想要創建一個反向的斜線,只需要將角度取反,例如:
background: linear-gradient(45deg, #f9d423, #e65c00);
除了使用線性漸變,還可以使用CSS3中的transform屬性來實現斜線的效果,例如:
transform: skew(-20deg);
上面的代碼將元素向左傾斜20度,可以通過改變正負號來調整傾斜的方向。
除了傾斜元素,還可以使用CSS3中的clip-path屬性來創建斜線的效果,例如:
clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%);
上面的代碼將從左上角到右上角再到右下角的三角形切割出來,形成斜線的效果。