CSSだけで色々な星を再現する（おまけ付き）

はじめに

CSSのborderプロパティ（および関連するもの）を使うと、色々と面白い表現ができることを知りました。そこでCSSのみで色々な星を表現してみました。

目次

• お気に入りな星
• キュピーンな星
• キラキラな星
• おまけ
• おわりに

お気に入りな星

シンプルなお星様です。

[動作イメージ]

ソースコード

実際の動作は以下で確認できます
http://codepen.io/nekoneko-wanwan/pen/jbVqBG

お気に入りな星.html

<div class="star-fav"></div>

お気に入りな星.css

.star-fav {
  margin: 100px;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 70px solid #f2c820;
    display: block;
    height: 0;
    width: 0;
    position: relative;
    animation:
        anim-star-fav-rotate 30s linear infinite,
        anim-star-fav-opacity 1s linear infinite
    ;
}
.star-fav:before,
.star-fav:after {
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 70px solid #f2c820;
    content: '';
    display: block;
    height: 0;
    left: -100px;
    position: absolute;
    top: 0;
    width: 0;
}
.star-fav:before {
    transform: rotate(71deg);
}
.star-fav:after {
    transform: rotate(-71deg);
}
@keyframes anim-star-fav-rotate {
    from { transform: rotate(35deg);}
    to { transform: rotate(395deg);}
}
@keyframes anim-star-fav-opacity {
    0%   { opacity: 1;}
    50%  { opacity: 0.5;}
    100% { opacity: 1;}
}

作り方・ポイント

DOM要素とその:before, :afterにそれぞれborderで三角形を作成し、それぞれの三角形の位置と角度を調整して、組み合わせています。

[作成イメージ]

注意事項

• transform: rotate()を使用しているため、対応ブラウザが限られます
• borderで図形を表現しているため、星の縁取りはできません

キュピーンな星

キュピーンとした星です。星というより光エフェクトですね。

[動作イメージ]

ソースコード

実際の動作は以下で確認できます
http://codepen.io/nekoneko-wanwan/pen/yYVOPK

キュピーンな星.html

<div class="star-kyupeen">
  <div class="star-kyupeen__path is-right"></div>
  <div class="star-kyupeen__path is-left"></div>
</div>

キュピーンな星.css

.star-kyupeen {
    position: relative;
    height: 200px;
    width: 200px;
    background-color: #f2c820;
    animation: anim-star-kyupeen 1s infinite linear;
}
.star-kyupeen__path:before,
.star-kyupeen__path:after {
    background-color: #fff;
    position: absolute;
    content: '';
    display: block;
    height: 100px;
    width: 100px;
    box-sizing: border-box;
}
.star-kyupeen__path.is-left:before {
    top: 100px;
    left: 0px;
    border-right: 1px solid #f2c820;
    border-top: 1px solid #f2c820;
    border-top-right-radius: 70%;
}
.star-kyupeen__path.is-left:after {
    top: 0px;
    left: 0px;
    border-bottom: 1px solid #f2c820;
    border-right: 1px solid #f2c820;
    border-bottom-right-radius: 70%;
}
.star-kyupeen__path.is-right:before {
    top: 100px;
    left: 100px;
    border-top: 1px solid #f2c820;
    border-left: 1px solid #f2c820;
    border-top-left-radius: 70%;
}
.star-kyupeen__path.is-right:after {
    top: 0px;
    left: 100px;
    border-left: 1px solid #f2c820;
    border-bottom: 1px solid #f2c820;
    border-bottom-left-radius: 70%;
}
@keyframes anim-star-kyupeen {
    0%   { transform: rotate(20deg) scale(1);}
    50%  { transform: rotate(10deg) scale(0.5);}
    100% { transform: rotate(20deg) scale(1);}
}

作り方とポイント

親要素1つ、子要素2つを用意します。それぞれの子要素の:before, :afterにborder-radiusで円弧を描画します。円弧の位置と向きを調整して、星形が切り抜かれるようにします。（星の周りが要素本体になる）

• ここではborder-topなどで向きを調整しているので、border-radiusが効くブラウザであれば動作するかと思います
• もちろんrotateで調整しても良いかと思います

[作成イメージ]

注意事項

• 星の周りが本体のため、縁取りはできますが、下レイヤーの背景を透過させるような使い方はできません（多分）

キラキラな星

キラキラと光る星です。これも光エフェクトですね。

[動作イメージ]

ソースコード

基本は上記のキュピーンな星に円形グラデーションを追加しただけです。

実際の動作は以下で確認できます
http://codepen.io/nekoneko-wanwan/pen/QjGNBa

キラキラな星.css

.star-kirakira:before {
    content: '';
    background-color: #fff;
    display: block;
    height: 50px;
    width: 50px;
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    margin: -25px 0 0 -25px;
    box-shadow: 0 0 30px 20px #fff;
    z-index: 100;
}

作り方とポイント

キュピーンな星でいう親要素の:beforeにbox-shadowを追加しています。（その他、細かくサイズなどを調整していますが基本はそれだけです）

注意事項

• キュピーンな星と同様に、背景透過はできません
• box-shadowとborder-radiusを使用しているので、動作が重くなるかもしれません

おまけ

円弧の位置と角度を調整して、怒りマークを表現してみました。これといって需要はないかと思います。

[動作イメージ]

ソースコード

実際の動作は以下で確認できます
http://codepen.io/nekoneko-wanwan/pen/vNyGjL

ピキピキ.html

<div class="anger"></div>

ピキピキ.css

.anger,
.anger:before,
.anger:after {
    border-right: 5px solid #d30000;
    border-bottom: 5px solid #d30000;
    border-bottom-right-radius: 100%;
    height: 50px;
    width: 50px;
    box-sizing: border-box;
}
.anger {
    position: relative;
    animation: anim-anger .5s linear infinite;
}

.anger:before,
.anger:after {
    position: absolute;
    content: '';
}

.anger:before {
    top: 60px;
    left: 15px;
    transform: rotate(-120deg);
}
.anger:after {
    top: 15px;
    left: 60px;
    transform: rotate(120deg);
}

@keyframes anim-anger {
    0%   { transform: scale(1);}
    50%  { transform: scale(0.9);}
    100% { transform: scale(1);}
}

おわりに

多くのブラウザに対応させたい場合や、背景と組み合わせて複雑な表現を行ないたい場合は、素直に画像やCanvasを使ったほうが良いかもしれませぬ。

　　　　　　　　　　　　　　,｡　＼　･:*　　　　　　　　:･ﾟ　　'☆,｡･:　　　*:
　　　　　　　　　　＼　　 　　　 ☆
　　,｡　･　:*　:･ﾟ'　　 ☆　　　　　　　　　　　　　　　　　　　　; .
　　　　ヽ　　　　　　　　　　　　　　　　　　　　　　ヽ
　　 　　 ☆ 　　　　　　　　　　　　　　　 　　　　　　*　　　　・
　　　　　　　　　　　･
　　　　 　　　　　　　　　　　　　　　　☆
　　　　　　　　　　　　　　　　　　　　　　　　　　　,｡　･　:*　:･ﾟ'
　　　　 ＿_　 ＿　　　　　＿_ 　 ,＿　　　　　＿_ 　 　 ＿_　　＿
.　 ＿_ |ﾛﾛ|／　 ＼　＿_ |ﾛﾛ|／　 ＼　＿_ |ﾛﾛ| ＿_..|ﾛﾛ|／　 ＼
＿|田|_|ﾛﾛ|_|　ﾛﾛ|＿|田|.|ﾛﾛ|_|　ﾛﾛ|＿|田|.|ﾛﾛ|_|田|.|ﾛﾛ|_|　ﾛﾛ|＿
..................................................................

~ END ~

参考サイト
https://css-tricks.com/examples/ShapesOfCSS/