CSS切角可以在網頁設計中起到非常好的裝飾作用，使得頁面看起來更加美觀和時尚。接下來就讓我們來看看如何使用CSS來進行切角。

首先我們需要使用border-radius屬性，這個屬性用于設置元素的圓角大小，可以設置一個或多個值。如下：

border-radius: 5px;
border-radius: 5px 10px;
border-radius: 5px 10px 15px;
border-radius: 5px 10px 15px 20px;

接著我們可以使用:before和:after偽元素來對元素進行裝飾。如下：

.box {
position: relative;
width: 200px;
height: 200px;
background-color: #ccc;
margin: 50px auto;
}
.box:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border-top: 50px solid #f00;
border-right: 50px solid transparent;
}
.box:after {
content: "";
position: absolute;
bottom: 0;
right: 0;
width: 0;
height: 0;
border-bottom: 50px solid #f00;
border-left: 50px solid transparent;
}

上述代碼會在元素的左上角和右下角創建一個傾斜的三角形，這樣就可以讓元素看起來更加有層次感。

另外我們還可以使用clip-path屬性來實現更多樣化的切角效果。該屬性允許您使用SVG形狀剪輯元素的可見部分。如下：

.box {
width: 200px;
height: 200px;
background-color: #ccc;
margin: 50px auto;
-webkit-clip-path: polygon(0 0, 100% 25%, 100% 75%, 0 100%);
clip-path: polygon(0 0, 100% 25%, 100% 75%, 0 100%);
}

上述代碼會在元素的左上角和右下角創建一個斜切的效果，這樣就可以實現更加獨特的裝飾效果。

以上就是CSS切角的一些常見方式，希望這篇文章能夠對大家有所幫助。