sounansa.net

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;
}