[CSS] 画像の隅に三角形のマーク（付箋タグ）をつけたい

公開日:2018/10/17 更新日:2020/03/01

やりたいこと

商品画像にマークを被せるようにつけることで、「新着」や「人気」などのポイントを強調できます
これをタグと呼ぶべきか、付箋と呼ぶべきか、いまいち呼称がはっきりしない装飾ですが、画像の印象を変えてくれるニクい装飾です
今回は三角形のマークを右上に取り付けるコードを書いてみました

サンプルコード

html

<figure class="fit_triangle">
    <img src="test.jpg">
    <figcaption>新着</figcaption>
</figure>

CSS

.fit_triangle {
    position: relative;
    overflow: hidden;
}

.fit_triangle > figcaption {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 1;
    margin: 0px;
    width: 4em;
    height: 4em;
    color: #fff;
    font-size: 18px;
}

.fit_triangle > figcaption::before {
    position: absolute;
    top: 0px;
    right: 0px;
    transform: translateX(50%) translateY(-50%) rotate(45deg);
    z-index: -1;
    width: 10em;
    height: 10em;
    background-color: #3388dd;    
    content: "";
}

仕組み、解説、補足など

「position」で画像の右上に、四角形を回転させたひし形を一部分だけ被せることで、画像に三角形のマークがくっつくように見せかけています
ひし形の不要な部分は、親要素の「over-flow: hidden;」で非表示にしています

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。