CSS卷角是一種常見的效果，通常用于制作頁面元素的圓角、邊框等效果。CSS3之前，制作圓角需要使用圖片或JavaScript，但現在使用CSS就可以輕松實現。下面我們來通過代碼演示如何制作一個卷角效果。

.box{
width: 100px;
height: 100px;
background-color: #fff;
border: 1px solid #ccc;
position: relative;
}
.box:before{
content: "";
position: absolute;
top: -10px;
right: -10px;
border-top: 10px solid #fff;
border-right: 10px solid #fff;
border-bottom: 10px solid transparent;
border-left: 10px solid transparent;
transform: rotate(45deg);
}

代碼解析：

首先我們需要創建一個容器，這里使用class名box。然后我們設置寬度、高度、背景色、邊框等基本樣式。

接著，在容器內部創建一個偽元素:before。設置content為空，position為absolute以便于定位，top和right分別為負10px以便于調整位置。

然后我們分別為偽元素的四個邊設置寬度和顏色，從而實現一個三角形的形狀。注意：為了實現卷角效果，我們需要讓右上角和右邊的兩個邊的寬度和顏色和偽元素的背景色一致，比如這里我們設置為白色（#fff）。

最后我們將偽元素旋轉45度，這樣就能實現一個卷角效果啦！

可以看到，使用CSS制作卷角效果非常簡單。我們可以根據需要調整寬度、高度、顏色等參數，甚至可以使用CSS動畫效果讓卷角慢慢展開。希望這篇文章能夠對你有所幫助，謝謝閱讀！