CSSだけでランキングとかに使う王冠を表現してみる

ランキングを表示する際にTOP3は金・銀・銅の王冠で表したいなと思いました。
追記:2016-06-16 Runstantを使ってコードを表示するように修正

で、作ったのがこんな感じ。
⇒View(html)とStyle(CSS)をクリックするとコードを見ることができます。

作り方

HTMLファイルの中で下記の要素を追加します。

<div class="crown"><div class="crown-circle"></div></div>

で、CSSファイルに下記を定義します。
王冠の色はボーダーの色で指定しています。
(下記は金冠の例)

あとは必要な数だけクラス名にプレフィックスをつけて使い分ける感じです。

.crown{
  width: 0px;
  height: 0px;
  border-bottom: 35px solid #BFA930;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  position: relative;
}
.crown:after{
  width: 0px;
  height: 0px;
  border-top: 15px solid transparent;
  border-bottom: 20px solid #FFE973;
  border-left: 20px solid #FFE973;
  border-right: 20px solid #FFD700;
  content: "";
  position: absolute;
  top: 0px;
  left: -20px;
}

.crown-circle{
  background-color:#A68C00;
  border-radius:50%;
  width: 5px;
  height: 5px;
  position: absolute;
  top: -5px;
  left: -21px;
}
.crown-circle:BEFORE{
  background-color:#A68C00;
  border-radius:50%;
  width: 5px;
  height: 5px;
  content: "";
  position: absolute;
  top: 0px;
  left: 19px;
}
.crown-circle:AFTER{
  background-color:#A68C00;
  border-radius:50%;
  width: 5px;
  height: 5px;
  content: "";
  position: absolute;
  top: 0px;
  left: 38px;
}

環境によっては各要素の位置がすれてしまうことがあるかもしれませんが、
そんなときはtopとleftで調整します。

まぁフリーのアイコンを探すとか、簡単なシェープなので作ってしまってもよいのですけどね。

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る