ミギムキ

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

やりたいこと

サンプルコード

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: ""; }

仕組み、解説、補足など

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

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

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