CSS是前端開發中非常重要的一部分，它可以控制網頁的樣式和布局。今天我們來學習如何使用CSS來做出一個角出來的樣式效果。

.box {
width: 200px;
height: 200px;
background-color: #ccc;
position: relative;
}
.box:before {
content: '';
position: absolute;
top: 0;
left: 0;
border-top: 20px solid #fff;
border-right: 20px solid transparent;
}
.box:after {
content: '';
position: absolute;
bottom: 0;
right: 0;
border-bottom: 20px solid #fff;
border-left: 20px solid transparent;
}

以上是CSS代碼，我們可以看到，在樣式中，我們先定義了一個盒子，并給它加上了一個背景色。然后使用偽元素（:before 和 :after）來做出角出來的效果。

在:before這個偽元素中，我們將其定位到盒子的左上角，同時設置了它的邊框樣式，上邊框為白色，右邊框為透明。

在:after這個偽元素中，我們將其定位到盒子的右下角，同時設置了它的邊框樣式，下邊框為白色，左邊框為透明。

這樣，我們就完成了一個角出來的樣式效果。