CSS 線段彎曲

CSS 可以使用 border-radius 實現圓角，但是如果我們想要實現彎曲的線段，該怎么辦呢？

這時候可以使用 CSS transform 的 skew() 函數，它可以沿著 X 和 Y 軸傾斜元素。我們可以將一個矩形或長方形元素傾斜，然后使用偽元素 ::before 和 ::after 來創建兩條斜線段，再使用 skew() 函數傾斜這些斜線段，就可以實現彎曲的線段效果。

.shape {
position: relative;
height: 50px;
width: 100px;
margin: 50px;
background: #333;
transform: skew(20deg); /* 對元素進行傾斜 */
}
.shape::before,
.shape::after {
content: "";
position: absolute;
height: 50px;
width: 50px;
top: 0;
background: #333;
transform: skew(-20deg); /* 對斜線段進行傾斜 */
}
.shape::before {
left: -50px;
border-right: 50px solid transparent;
border-bottom: 50px solid #333;
}
.shape::after {
right: -50px;
border-left: 50px solid transparent;
border-top: 50px solid #333;
}

使用上述代碼，我們可以創建一個傾斜的矩形元素，并在其兩側添加偽元素 ::before 和 ::after，然后對它們應用傾斜和邊框顏色，就可以創建一條彎曲的線段。

總之，使用 CSS transform 的 skew() 函數可以讓我們輕松實現彎曲的線段效果，但是需要注意元素的位置和大小，以及偽元素的樣式。