css对角颜色不同 |css 多选

首先大家要创建一个元素，代码如下：

<div class="container"></div>

接下来，大家需要通过CSS来定义这个容器的宽高和背景色，以及用伪元素:before和:after绘制两个三角形，并对它们进行颜色设置。

.container {
position: relative;
width: 200px;
height: 200px;
background-color: #f1f1f1;
}
.container:before,
.container:after {
content: "";
position: absolute;
top: 0;
width: 0;
height: 0;
}
.container:before {
left: 0;
border-left: 100px solid transparent;
border-right: 100px solid #f00;
border-bottom: 100px solid transparent;
}
.container:after {
right: 0;
border-left: 100px solid #f00;
border-right: 100px solid transparent;
border-bottom: 100px solid transparent;
}

大家使用伪元素:before和:after绘制两个三角形，其中一个是左三角形，另一个是右三角形。这里的关键点是设置左三角形的border-right为红色，右三角形的border-left同样设置红色。

现在，您可以在页面上看到两个不同颜色的三角形啦！

这个技巧对于设计一个鲜艳、有趣的网站非常有帮助。您可以尝试在容器样式中改变背景颜色，以及改变三角形的颜色方案以找到最佳效果！