HTML+CSSで右上に三角のラベルをつける方法

概要

あるコンポーネントの右上にラベルやバッジをつけるHTML/CSSの書き方を学んだので備忘。 もっと良い方法がある場合は教えて欲しい。 サンプルは以下のようなもの。

HTML

HTMLでは親のDOM（class: badge）に、 - 三角形を描くDOM（class: triangle）と、 - その上に表示するラベルを描くDOM（class: label） をそれぞれ用意する。 子要素をそれぞれ before, after の擬似要素で用意しても書けそう。 必要以上にDOMを増やしたくない場合はその方がいいかも。

    <div class="badge">
      <span class="triangle"></span>
      <span class="label">ラベル</span>
    </div>

CSS(SCSS)

CSS（今回簡略化のためSCSS）は以下。

.badge {
  position: relative;
  
  .triangle {
    position: absolute;
    border-bottom: 60px solid transparent;
    border-left: 60px solid red;
  }

  .label {
    position: absolute;
    top: 10px;
    left: 5px;
    font-size: 14px;
    color: #fff;
    transform: rotate(-45deg);
  }
}

まず親となる badge に position: relative を持たす。 そして子要素たちに position: absolute を持たす。

次にtriangleで三角形を作る。 cssで三角形の作り方は下記を参照。

www.granfairs.com

上記に書かれている通り、以下で実現できる。サイズや色は適当。

    border-bottom: 60px solid transparent;
    border-left: 60px solid red;

最後にlabelで文字を上に描く。

  .label {
    position: absolute;
    top: 10px;
    left: 5px;
    font-size: 14px;
    color: #fff;
    transform: rotate(-45deg);
  }

transform: rotate(-45deg); で45度回転させて文字を表示する。 top, left を使って場所を調節する。 font-size や color は適当。

ラベルは下におかれるコンポーネントの上に載せないといけないので、 必要に応じて z-index を指定する必要があると思われる。

サンプルコード

完成形のサンプルコードは以下。