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

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





#目次

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





#お気に入りな星

シンプルなお星様です。

**[動作イメージ]**
![star1_anim.gif](https://qiita-image-store.s3.amazonaws.com/0/58436/98ba8c40-66b0-416a-0387-be3103a2cbd6.gif)

##ソースコード

> 実際の動作は以下で確認できます
> 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で**三角形**を作成し、それぞれの三角形の位置と角度を調整して、組み合わせています。

**[作成イメージ]**
![star1_make.gif](https://qiita-image-store.s3.amazonaws.com/0/58436/c2ae9221-9deb-e2b4-53a9-b74508e28a99.gif)

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





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

**[動作イメージ]**
![star2_anim.gif](https://qiita-image-store.s3.amazonaws.com/0/58436/8c55a9da-486b-9e5c-c089-64aae18b77ca.gif)

##ソースコード

> 実際の動作は以下で確認できます
> 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`で調整しても良いかと思います

**[作成イメージ]**
![star2_make.gif](https://qiita-image-store.s3.amazonaws.com/0/58436/120ce653-87eb-0f72-4211-061cd428a452.gif)

![star2_make2.gif](https://qiita-image-store.s3.amazonaws.com/0/58436/7ac52fa4-7b29-3f8e-74f8-317549fd7126.gif)

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





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

**[動作イメージ]**
![star3_anim.gif](https://qiita-image-store.s3.amazonaws.com/0/58436/c9fc610e-c16c-0d5a-c437-7e9980475f76.gif)


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

> 実際の動作は以下で確認できます
> 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`を使用しているので、動作が重くなるかもしれません





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

**[動作イメージ]**
![anger_anim.gif](https://qiita-image-store.s3.amazonaws.com/0/58436/1214535b-25ad-76ed-dcb3-8844ac075c85.gif)

##ソースコード

> 実際の動作は以下で確認できます
> 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/