0

私はクラスを使用して縞模様の黒いひし形を持っています（ここでdiamondフィドルを参照してください）：

.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 を変更するにはどうすればよいですか?

4

2 に答える 2

3 
.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/

于 2013-01-25T18:51:33.607 に答える
-1

あなたの問題は優先順位です。クラスはCSS で最初に表示されるため、クラスのred前に処理されます。問題を解決するには、クラスをクラスの下にdiamond移動します。reddiamond

于 2013-01-25T18:55:17.403 に答える