リボンっぽいラベルをリストに重ねて表示する

何かのリスト一覧で「使用中」や「予約済」などの一言添えたオリジナルラベルが

あるとアプリがコミカライズに映えていいなと思い作ってみました。

(ここではリボンといっていますが)

具体的に言うとまず普通の色付き四角をcssを使って描画します。

.used-box {
  position:relative;}

.notify-belt {
  position: absolute;
  font-size: 12px;
  border-top: 55px solid #ff8097;
  border-right: 55px solid transparent;
  border-bottom: 55px solid transparent;
  border-left: 55px solid #ff8097;}

実際に見てみると左と上部分のみ着色されたラベルが見れると思います。

四角の右下部分を消しているだけに見えますが、これは実際には普通の三角形の集まりで

右下部分は三角形を見えなくしているだけ。

このように部分的に面積を消すにはborderプロパティを指定します。

前述したセレクタを見てみるとborder-top,border-right,border-bottom,border-leftと

並んでいますがrightとbottomのプロパティのみをtransparentで透明化しているので

このように見えるという仕組みです。

55pxの部分を一か所いじると形成している三角形の大きさが変化します

(どれか一つをいじると四角形がいびつになるので必ず統一してください。)

使ってみたいかたはリストやページトップに添えて使ってみてください。