久しぶりの CSS ネタ！
今回は、画像の左上隅に三角形と「NEW!!」のテキストを入れる方法です。
どこで使うかはまだ未定ですが…今開発に携わっているアプリ内で新着一覧の機能があるので、そこで使えたらと思っています。
実際に実装した時のイメージがこちら。
写真左上隅に赤い三角形と「NEW!!」のテキストを表示しています。
別に文言は何でもいいと思いますが、このくらい短くないと三角形の中に入らないので注意ですね。
または、Webフォントアイコンでもいいと思います。
実装にあたり、参考にさせていただいた記事はこちら。
CSSだけで四角形の隅に三角マークを追加する方法｜iwb.jp
https://iwb.jp/css-square-corner-triangle-mark/
こちらの記事では、CSS だけで要素の左下隅に赤い三角形を追加する方法を紹介されています。
さて実装方法ですが、まず、サンプルの HTML がこちら。
1 | <div><img src='[画像のパス]' /></div> |
今回は、<div> 内に画像を表示しています。
画像でなくてもOKです。
CSS はこちら。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | div { position: relative; width: 500px; height: 400px;}div:before { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 0; border-top: 35px solid #f00; border-right: 35px solid transparent;}div:after { content: "NEW!!"; position: absolute; top: 0; left: 0; font-size: xx-small; color: #FFF; transform: rotate(-45deg) translate(-5px, 5px);}div img { width: 100%; height: 100%; object-fit: cover;} |
6行目の :before で赤い三角形を表示しています。こちらは参考サイトをそのままコピー＆ペーストさせていただいています。
そして、16行目の :after で、NEW!! の文字を表示しています。
斜めに傾ける処理は、23行目の transform: rotate(-45deg) translate(-5px, 5px); で行っています。
こちらの値は、テキストの長さや、三角形の大きさ、フォントの大きさによって変わってくるので、実際の画面を見ながら調整してください。
そして最後、25行目以降で、要素内の画像のサイズと切り抜き位置を調整すれば完了です。
コードとしては以上です。
三角形の描画さえ何とかなれば、あとはテキストの表示だけなので、それほぼ難しくなかったですね。
ただ、最初三角形の部分を :after で指定してしまい、文字との重なり順で少し迷いました。
また、画像を用意してそれを使うという方法もあるとは思いますが、画面の解像度によっては、画像がぼやける可能性もあり得るので、出来るのなら CSS を使うと良いと思います。
以上、CSS で 画像の左上隅に三角形とNEW!!のテキストを配置する方法でした。
ご参考になれば幸いです。
