【CSS練習】「ゼルダ○伝説」に出てくるお金(ルピー)をCSSだけで作ってみた

#どうも7noteです。某人気ゲーム「ゼルダ○伝説」に出てくるルピーをCSSだけで作る

![rypy.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/aa2ab259-e363-4323-d8b3-4f1c60b02fb7.png)


私事ですが、普段からゲームは結構好きで、京都に本社のある花札を作っていたことで有名な大手ゲーム会社のゲームも昔からよく遊んでました。

その中でよく遊んでいたゲームの中に「ゼルダ○伝説」という種類のゲームがあるのですが、
そのゲーム内で出てくる**ルピーという通貨のお金をCSSで再現**してみました。
（※ゲームタイトルは一応伏せ字しておきます。）

ちなみにインドルピーではないので、インドルピーだと思った方はブラウザバックボタンを押して前のページにお戻りください。

ゲーム内で出てくるルピーは宝石みたいできれいなので、応用すれば他のことにも使えるかも？



## ソース

```index.html
<div class="rupee">
  <div class="base"></div>
  <div class="center"></div>
</div>
```

```style.css
.rupee {
  width: 100px;   /* 全体の基準になります。 */
  height: 200px;  /* 横幅の2倍 */
  position: relative;
}

.base {
  width: 100%;
  height: 50%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to right, #287e27 50%, #1f511e 50%);
  margin: auto;
}
.base::before,
.base::after {
  content: "";
  width: 0;
  right: 0;
  transform: rotate(45deg);
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
}
.base::before {
  border-top: 35px solid #23361a;    /* 横幅の35%の値 */
  border-right: 35px solid #23361a;
  border-bottom: 35px solid #9cf859;
  border-left: 35px solid #9cf859;
  top: -35px;
}
.base::after {
  border-top: 35px solid #2d9d2f;    /* 横幅の35%の値 */
  border-right: 35px solid #2d9d2f;
  border-bottom: 35px solid #1e3a14;
  border-left: 35px solid #1e3a14;
  bottom: -35px;
}

.center {
  width: 60%;
  height: 30%;
  background: #26a824;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.center::before,
.center::after {
  content: '';
  width: 0;
  height: 0;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
}
.center::before {
  border-top: 0 solid transparent;
  border-left: 30px solid transparent; /* 横幅の30% */
  border-bottom: 30px solid #26a824;
  border-right: 30px solid transparent;
  top: -30px;
}
.center::after {
  border-top: 30px solid #26a824;     /* 横幅の30% */
  border-left: 30px solid transparent;
  border-bottom: 0 solid transparent;
  border-right: 30px solid transparent;
  bottom: -30px;
}
```

![rypy.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/1beabaa6-bffa-0584-6165-ecbca62b9163.png)

## 解説

作り方は上のソースをまるまるコピーしてください。
borderなど一部はpx指定の必要があるので、全体の横幅を基準としてコメントの%分のpxを指定してください。

そして作り方の解説としては大きく3つのパーツに分かれているので、それぞれで解説します。

### パーツ①　「ベース」

![parts1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/3d540dca-1751-f8bc-7452-7542b2ca2407.png)

これが左右になる部分です。このベースを作ります。
cssは「.base」となっている部分ですね。

### パーツ②　「上下」

ベースに擬似要素で上下部分も作ります。
cssは「.base::before」と「.base::after」です。

![parts2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/8f3065d2-7377-6fe9-e85d-3f30d1e393cc.png)

### パーツ③　「中心部」

最後に中心の6角形を作ります。
cssは「.center」です。

6角形の作り方は過去に記事を書いているので、詳しく知りたい方は以下の記事もご覧ください。

https://qiita.com/7note/items/0a2244aa3e84e37b43f5

![parts3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/661092/98c4c4d8-3173-5cfe-2add-d4b5157dde77.png)


## まとめ

上で解説した3つのパーツをすべて重ねることで、ルピーをCSSだけで再現することができます。

もっとこだわりを入れるのであれば、
若干グラデーションをかけてもっと立体感を出すこともできるかもしれませんね。

気が向いたときに違う色でも作ってみたいなと。紫ルピーの透明感とかは再現しようと思うと結構苦戦しそう・・・

#### おそまつ！
~ Qiitaで毎日投稿中!! ~
[【初心者向け】WEB制作のちょいテク詰め合わせ](https://qiita.com/7note)