css实现长方形中有斜线 |css私有样式

.box {
position: relative;
width: 200px;
height: 100px;
background-color: #ccc;
overflow: hidden;
}
.slash {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: skewX(-30deg);
transform-origin: 0 0;
background-color: #fff;
background-image: repeating-linear-gradient(-45deg, #fff, #fff 10px, #ccc 10px, #ccc 20px);
}

首先，大家创建一个容器，设置其宽度、高度和背景色。由于大家要在这个长方形中加入斜线，所以大家需要设置其为相对定位，并且将其溢出部分隐藏。

接下来，大家需要创建一个伪元素，来实现斜线的效果。首先大家将其设置为绝对定位，然后将其宽度和高度设置为100%。接着，大家使用CSS3中的skewX函数将其斜切，并且将其变换中心设置在左上角，这样大家就可以实现左上到右下的斜线了。最后，大家为其设置一个背景色，以及一个背景图片。这里大家使用了repeating-linear-gradient函数来实现重复图片的效果。通过这样的设置，大家就成功地实现了长方形中有斜线的效果。

通过这个小例子，大家不仅学习了如何使用CSS实现斜线效果，还学习了一些基本的CSS属性和函数。希望这个小例子能对大家的学习有所帮助。