CSS3實現斜切邊/切角

效果圖

代碼

margin: 100px auto;
width: 200px;
height: 100px;
background: 
	linear-gradient(135deg, transparent 0px, #000 0) top left,
    linear-gradient(45deg, transparent 0px, #000 0) bottom left,
    linear-gradient(-45deg, transparent 35px, #000 0) bottom right,
    linear-gradient(-135deg, transparent 35px, #000 0) top right;
background-size: 50% 50%;
background-repeat: no-repeat;

分析

linear-gradient(-45deg, transparent 35px, #000 0) bottom right,

-45deg 旋轉角度，用於控制切角的方向
transparent 35px 從哪里切，以透明顏色開始渲染35px
#000 0 0指的是從15px開始處用#000顏色渲染剩下的區域

剩下的區域：
background-size: 50% 50%;
background-repeat: no-repeat;
每一個linear-gradient的背景占1/4的大小，且不重復
bottom right設置background-position
所以渲染出來的區域就是效果圖的右下角角1/4處。