Css 改变条纹的颜色

我有一个带条纹的黑钻石，使用类

diamond

（参见小提琴）：

现在，我想要一个类

red

，它将使钻石变成红色，包括边框和条纹。我已经设法设置了红色边界，但没有设置红色条纹。如何修改

.red

的CSS，使条纹变为红色

.diamond {
    border: 8px solid black;
    overflow: hidden;
    position: relative;
    margin: 0 auto;
    padding: 12%;
    width: 0;
    -webkit-transform: scaleY(0.5) rotate(45deg);
}
.diamond:before {
    position: absolute;
    top: 0;
    right: -37.5%;
    bottom: 0;
    left: -37.5%;
    background: -webkit-linear-gradient(black 50%, transparent 50%);
    -webkit-transform: scaleY(1.155) skewX(-30deg) rotate(30deg);
    background-size: 10px;
    content: '';
}
.red {
    border-color: crimson !important;
}
.red:before {
    background-image: -webkit-linear-gradient(red 50%, transparent 50%);
}

---

小提琴

你的问题是优先顺序。

red

类在

diamond

类之前处理，因为它首先出现在CSS中。将

red

类移动到

diamond

类下方，以解决您的问题。

FWIW我在FF中至今未看到任何小提琴上的条纹。只有黑色和红色的方块。我的代码是WebKit。对不起，嘎。我应该看到的。谢谢，“仅适用于WebKit”是新的“仅适用于IE6”。。。请，请，从标准开始，仅在必要时添加供应商前缀。请稍候。为什么要使用背景图像？一个解释会很好。因为如果你只使用

背景

它将覆盖

背景大小：10px

。试试看-上面的

红色

类，条纹保持黑色，但是下面的

红色

类，则

红色：在

类开始工作之前。

.diamond {
    border: 8px solid black;
    overflow: hidden;
    position: relative;
    margin: 0 auto;
    padding: 12%;
    width: 0;
    -webkit-transform: scaleY(0.5) rotate(45deg);
}
.diamond:before {
    position: absolute;
    top: 0;
    right: -37.5%;
    bottom: 0;
    left: -37.5%;
    background: -webkit-linear-gradient(black 50%, transparent 50%);
    -webkit-transform: scaleY(1.155) skewX(-30deg) rotate(30deg);
    background-size: 10px;
    content: '';
}
.red {
    border-color: crimson !important;
}
.red:before {
    background-image: -webkit-linear-gradient(red 50%, transparent 50%);
}