More than 3 years have passed since last update.

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

Last updated at 2021-06-18Posted at 2021-06-10

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

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

その中でよく遊んでいたゲームの中に「ゼルダ○伝説」という種類のゲームがあるのですが、
そのゲーム内で出てくるルピーという通貨のお金を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;
}