css中的斜线剪切 |css 表格的背景

剪切方法：  
.clip-diagonal {  
width: 200px; // 设置宽度  
height: 200px; // 设置高度  
background-color: #333333; // 设置背景色  
overflow: hidden; // 使得内容溢出隐藏  
position: relative; // 子元素需要绝对定位，以使斜线填充整个《.clip-diagonal》元素  
}  
.clip-diagonal:before {  
content: ""; // 确保伪类本身是“空”的  
position: absolute; // 绝对定位，使其覆盖在父元素之上  
top: 0; // 设置为顶部  
left: 0; // 设置为左部  
width: 100%; // 宽度为父元素宽度  
height: 100%; // 高度为父元素高度  
z-index: 1; // 避免与其他元素重叠，使其在其他内容上方  
background: linear-gradient(135deg, #00779c 0%, #00779c 33.33%, #e62551 33.33%, #e62551 66.66%, #f9b400 66.66%, #f9b400 100%); // 设置斜线填充的整个伪元素  
transform: skewY(-12deg); // 将伪元素向左下角偏移  
transform-origin: left top; // 转换的原点为左上角  
}

在上述代码中，“.clip-diagonal”类选择器用于设置父元素，其属性“overflow:hidden”是必须的，以使得伪元素和子元素都能被隐藏。伪元素“:before”用于绘制斜线部分，并采用“linear-gradient()”属性来设置斜线的背景样式，它由45度倾斜的斜线组成。当需要自定义斜线形状时，只需在“linear-gradient()”属性里指定斜线颜色和其中断点的位置即可。