CSS是許多網頁設計師和開發人員的最愛，因為它可以讓網頁看起來充滿活力且有趣。其中有一種CSS效果稱為傾斜效果，可以使一個元素呈現出斜線或斜坡的效果?，F在，我們來看一下CSS有哪些傾斜效果：

/*1. 使用transform: skew()傾斜*/
.skew {
transform: skew(20deg);
}
/*2. 使用transform: rotate()旋轉*/
.rotate {
transform: rotate(-10deg);
}
/*3. 使用文字方向方案*/
.text {
writing-mode: vertical-lr; /*從上到下傾斜*/
text-orientation: upright; /*直立*/
}
/*4. 使用 CSS Gradient 傾斜*/
.gradient {
background: linear-gradient(to right bottom, #cc2f2f, #753a88);
transform: skew(-20deg); /* 與 linear-gradient 方向相反的方式進行傾斜 */
}
/*5. 使用 CSS clip-path*/
.clip {
clip-path: polygon(0 50%, 100% 0, 100% 100%);
}
/*6. 使用斜杠/反斜杠進行傾斜*/
.slash {
background: #1d3c6c;
background: linear-gradient(135deg, #1d3c6c 25%, #155aa4 25%, #155aa4 50%, #1d3c6c 50%, #1d3c6c 75%, #155aa4 75%);
background-size: 56px 56px;
position: relative;
&::before,
&::after {
content: '';
position: absolute;
width: 0;
height: 0;
border: 28px solid transparent;
}
&::before {
border-top-color: #155aa4;
left: 0;
top: 0;
}
&::after {
border-bottom-color: #155aa4;
right: 0;
bottom: 0;
}
}

這里列出的只是CSS傾斜效果的一部分，如果你想要讓網頁看起來更加獨特、有趣，傾斜效果已經為你提供了無數可能。只需花費一些時間學習它，就可以在設計中嘗試潛在的無窮可能性。