Question

我使用课程diamond制作条纹黑色钻石（请参阅小提琴here）：

.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，它会使钻石变红，包括边框和条纹。我设法施加了红色边框，但没有红色条纹。如何修改.red的CSS以使条纹变为红色？

Answer 1

.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%);
}

小提琴http://jsfiddle.net/UQQMz/1/

Answer 2

您的问题是优先顺序。 red类在diamond类之前处理，因为它首先出现在CSS中。将red类移到diamond类下面以解决您的问题。

改变条纹的颜色

2 个答案: