css矩形斜切 |css 字体颜色设置

.slanted-rectangle {
width: 300px;
height: 200px;
position: relative;
overflow: hidden;
}
.slanted-rectangle:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #428bca;
transform: skew(-20deg);
transform-origin: top left;
}
.slanted-rectangle p {
position: relative;
z-index: 1;
color: #FFF;
padding: 20px;
font-size: 24px;
}

首先，大家需要创建一个包含内容的容器，并将其设置为相对定位和 overflow:hidden。然后，大家使用:before 伪类为容器创建一个绝对定位元素。在这个元素上，大家将使用 transform 属性中的 skew() 函数创建斜切效果。大家指定一个负的度数来向左倾斜矩形。通过 transform-origin 属性，大家可以将变形的原点设置在左上角。

最后，大家在容器内添加一个段落元素，并将其设置为相对定位，以便在绝对定位的容器下居中。大家设置了一个z-index值，以便将它放在矩形前面。大家还应用了一些样式，使文本更容易阅读。

在以上代码的基础上，您可以尝试使用其他度数值和不同的颜色，以创建一个适合您需要的斜角矩形。