ネットショップで使えそう。画像の右上に「NEW」アイコン

仕事で作ったので、忘れる前にメモしておく。
ネットショップなどで商品画像の上にアイコンを乗せたいという要望は昔からあった。
以前は商品画像を背景に指定して、上に透過画像を重ねて･･･と面倒な事をした上にやたら表示が重いと悲しい事になってましたが今ではcssで簡単に実装可能。

サンプル画像こんな感じ

■CSS
<style type="text/css">
div.tri{
width:150px;
height:150px;
margin:0 auto 20px auto;
padding:0;
position:relative;
background-size:cover;
background-repeat:no-repeat;
}
.tri:after {
top: 0;
right: 0;
position: absolute;
border-bottom:2.5rem solid transparent;
border-right:2.5rem solid #FF3538;
content: " ";
height: 0;
width: 0;
}
.tri_up:after {
top: 0;
right: 0;
position: absolute;
border-bottom:2.5rem solid transparent;
border-right:2.5rem solid #47ACFF;
content: " ";
height: 0;
width: 0;
}
div.txt{
z-index:999;
color: rgb(255, 255, 255);
background-color:transparent;
position:absolute;
top:0.5rem;
right:0.2rem;
width:auto;
height:auto;
font-size: 0.7rem;
line-height:0;
text-align: right;
font-weight:normal;
}
</style>

■HTML
<div class="tri" style="background-image:url('http://apricotweb.net/wp-content/uploads/2015/07/150628_122844-640x480.jpg');">
<div class="txt">NEW</div>
</div>

表示領域を指定して、after擬似要素のボーダーで三角を表示
アイコンの文字は絶対位置で指定して重ねてるだけ。

このやりかたの肝は、ボーダーとフォントのサイズをきちんと指定してあげること。
ボーダーはpx（絶対単位）指定だけどフォントはem（相対単位）とかにしてしまうと、環境によってはみ出したりして悲惨。
最近はレスポンシブデザインが主流なのでremが無難でしょうね。

導入時はこんなかんじでUPも作っておくとよさげ。
こういったアイキャッチは、にぎわい感も出せるのできちんと使ってあげるとCVRに返ってくる。