sounansa.net

星型のギザギザのバッジをCSSだけで作ってみた

スポンサーリンク

Pocket

CSSっていろんな図形が作れるのに感動です。

これまでにもハートなんてのをCSSだけで作成してきましたが、今度は星型のギザギザのバッジを作成します。

スポンサーリンク

HTML

<a href="#" class="starburst">
    <span>
        <span>
            <span>最新<br />
                  NEWS
            </span>
        </span>
    </span>
</a>

CSS

.starburst {
display: block;
width: 4em;
height: 4em;
line-height: 1.8em;
background: #FF9999;
-webkit-transform: rotate(-70deg);
-moz-transform: rotate(-45deg);
rotation: -45deg;
position: relative;
top: 2em;
left: 2em;
text-align: center;
text-decoration: none;
color: #FFF;
font-weight: bold;
text-shadow: 0 0 3em #FF2F2F, 0 0 4px #FF2F2F;
-moz-transition: -moz-transform 0.3s ease;
-webkit-transition: -webkit-transform 0.3s ease;
}
.starburst span {
display: block;
width: 4em;
height: 4em;
background: #FF9999;
-webkit-transform: rotate(22.5deg);
-moz-transform: rotate(22.5deg);
rotation: 22.5deg;
}

スポンサーリンク

あわせて読みたい

  • CSSでハートの形をつくってみたCSSでハートの形をつくってみた CSSで試しにハートを作ってみました。 丸や三角がCSSで作れるなら、ハートだっていけるでしょ。てなノリで作ってみました。HTMLCSS使いどこ […]
  • コピペ用 HTML5の雛型(スケルトン)コピペ用 HTML5の雛型(スケルトン) HTMLのコーディング始めるとき、お決まりの書式ってコピペするだけのことですが、よく使うけど、その都度ググるのが面倒なんですよね。なんかDreamweaverにスニペット […]
comments powered by Disqus