2

CSSに続いて12ポイントバーストを描画するこのページでは、テキストをその中に入れるにはどうすればよいですか（現在の形式では、テキスト内にテキストは表示されません。z-indexをテストしても成功しません）。

12バーストの境界線を最もきれいな方法で描画するにはどうすればよいですか？

#burst-12 {
    background: red;
    width: 80px;
    height: 80px;
    position: relative;
    text-align: center;
}
#burst-12:before, #burst-12:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 80px;
    width: 80px;
    background: red;
}
#burst-12:before {
    -webkit-transform: rotate(30deg);
       -moz-transform: rotate(30deg);
        -ms-transform: rotate(30deg);
         -o-transform: rotate(30deg);
}
#burst-12:after {
    -webkit-transform: rotate(60deg);
       -moz-transform: rotate(60deg);
        -ms-transform: rotate(60deg);
         -o-transform: rotate(60deg);
}
4

1 に答える 1

5

必要なのは、バーストコンテナ内に別の要素をネストすることだけです。

<div id="burst-12"><span>I am the text</span></div>

次に、好きなようにスタイルを設定できます。

#burst-12 span {
 display:block;
 position:absolute;
 z-index:2;
}

ここに非常に基本的な例があります。

于 2013-01-24T07:14:10.997 に答える