使用css實現一個切角的功能，有以下幾種方案：

<div class="box"></div>

方案一：linear-gradient

linear-gradient配合backgroud-image可以實現背景漸變的效果。linear-gradient的漸變過渡區的占比是總的空間（高度或寬度）減去上下兩個著色塊空間占比剩下的空間，所以如果后一個顏色的百分比比前一個顏色小的話，會自動將當前顏色值的百分比設置為前面顏色中的最大百分比值，也就是說

background:linear-gradient(red 50%,orange 40%
);

其實相當于

background:linear-gradient(red 50%,orange 50%
);

其效果就是過渡區沒有空間，即沒有過度效果，兩個顏色之間是一條直線。
所以可以使用這種方式實現切角效果：

div{margin: 50px;width: 200px;height: 100px;
}
.box{background:linear-gradient(135deg,transparent 10px,lightskyblue 0) left top,linear-gradient(-135deg,transparent 10px,lightskyblue 0) right top,linear-gradient(-45deg,transparent 10px,lightskyblue 0) right bottom,linear-gradient(45deg,transparent 10px,lightskyblue 0) left bottom;background-size: 50% 50%;background-repeat: no-repeat;
}

方案二：clip-path

clip-path: polygon可以將圖形進行切割。圖形的左上角為（0，0）坐標，根據坐標進行切割。
所以假設需要切一個20px的角，可以設置：

.box{width: 200px;height: 100px;background-color: lightskyblue;clip-path: polygon(20px 0,calc(100% - 20px) 0,100% 20px, 100% calc(100% - 20px),calc(100% - 20px) 100%, 20px 100%,0 calc(100% - 20px), 0 20px);
}

邊框

上述兩種方案如果加上邊框，邊框還是矩形，無法實現切角效果。
結合clip-path和linear-gradient可以實現加上邊框的效果。
首先把linear-gradient的第一個顏色設成跟border同一個顏色，獲得如下效果：

.box {background: linear-gradient(-45deg, #289eef 8px, lightskyblue 0) bottom right,linear-gradient(45deg, #289eef 8px, lightskyblue 0) bottom left,linear-gradient(135deg, #289eef 8px, lightskyblue 0) top left,linear-gradient(-135deg, #289eef 8px, lightskyblue 0) top right;background-size: 50% 51%;background-repeat: no-repeat;border: solid 1px #289eef;}

使用clip-path把角切掉，這里注意取值的計算，如果linear-gradient的分割線是8px，88 + 88再開根號，那么clip-path的取值應該是11px。

.box {clip-path: polygon(11px 0, calc(100% - 11px) 0,100% 11px, 100% calc(100% - 11px),calc(100% - 11px) 100%, 11px 100%,0 calc(100% - 11px), 0 11px);background: linear-gradient(-45deg, #289eef 8px, lightskyblue 0) bottom right,linear-gradient(45deg, #289eef 8px, lightskyblue 0) bottom left,linear-gradient(135deg, #289eef 8px, lightskyblue 0) top left,linear-gradient(-135deg, #289eef 8px, lightskyblue 0) top right;background-size: 50% 51%;background-repeat: no-repeat;border: solid 1px #289eef;}