どうも7noteです。画像に「SALE」とか「カテゴリー」などのラベルを付ける方法を解説。
まずは見本をどうぞ。
このように画像やブロック要素に目立たせる用のラベルデザインをCSSで付けていきます。
運用・使い方のイメージは、特定のクラス名が付いたものだけラベルが付くようにします！
作り方
index.html
<divclass="box sale"><imgsrc="sample.png"alt="画像名"></div>style.css
.box{width:160px;/* 表示する横幅 */height:160px;/* 表示する高さ */position:relative;/* 基準の位置とする */}.boximg{width:100%;/* boxの幅いっぱいに画像を表示 */}.sale::before{content:"";/* こっちは空 */width:0;/* 三角形を作るため0 */height:0;/* 三角形を作るため0 */position:absolute;/* 位置を絶対指定 */top:0;/* 上から0pxの位置 */left:0;/* 左から0pxの位置 */border:solid20px#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);/* 斜めに文字を回転 */}
解説
疑似要素を使い、三角形の部分と文字の部分を分けて重ねて表現しています。
::beforeには、borderで三角形を作り、左上寄せに配置します。
そして::afterには入れたい文字をcontentに入れ、今回はtransform: rotate(-45deg)を使って、文字を斜めにしました。
まとめ
beforeとafterにあえて分けたことで、カスタマイズしやすい作り方かなと思います。
いろいろ自由に変えて使ってもらえればうれしいです。
おそまつ！
~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ