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处。