ミギムキ

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

仕組み、解説、補足など

スポンサー広告