どうも7noteです。画像に「SALE」とか「カテゴリー」などのラベルを付ける方法を解説。

まずは見本をどうぞ。

このように画像やブロック要素に目立たせる用のラベルデザインをCSSで付けていきます。
運用・使い方のイメージは、特定のクラス名が付いたものだけラベルが付くようにします！

作り方

index.html

<div class="box sale">
    <img src="sample.png" alt="画像名">
</div>

style.css

.box {
  width: 160px;      /* 表示する横幅 */
  height: 160px;     /* 表示する高さ */
  position: relative;/* 基準の位置とする */
}

.box img {
  width: 100%; /* boxの幅いっぱいに画像を表示 */
}

.sale::before {
  content: ""; /* こっちは空 */
  width: 0;    /* 三角形を作るため0 */
  height: 0;   /* 三角形を作るため0 */
  position: absolute;  /* 位置を絶対指定 */
  top: 0;              /* 上から0pxの位置 */
  left: 0;             /* 左から0pxの位置 */
  border: solid 20px #f00; /* 赤色のborderを↓ */
  border-right-color: transparent; /* 左上付けの↓ */
  border-bottom-color: transparent;/* 三角形に見せる */
}

.sale::after {
  content: "sale"; /* 文字を入れる。画像も可 */
  color: #FFF;     /* 文字色を白にする */
  font-size: 14px; /* 文字サイズを決める */
  font-weight: bold; /* 文字を太文字にする */
  position: absolute;/* 位置を絶対指定 */
  top: 2px;        /* 入れる文字や位置によって微調整してください */
  left: 2px;       /* 入れる文字や位置によって微調整してください */
  transform: rotate(-45deg); /* 斜めに文字を回転 */
}