サンプルCSS
.btnBox a { background:#EEE; position: relative; display: inline-block; height: 120px; line-height:120px; text-align:center; margin: 0 8px; width: 200px; border:2px solid #000; color:#000; text-decoration:none; overflow: hidden; *display: inline; *zoom: 1; } a div { display: inline; } a div span { font-size: 15px; font-weight: bold; left: -30px; line-height: 30px; text-align: center; top: 16px; width: 120px; position: absolute; display: inline-block; text-align: center; background: #d93131; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); font-family: 'Helvetica Neue', Helvetica, Verdana, Arial, sans-serif; color:#FFFFFF; }
サンプルHTML
<div class="btnBox"> <a href="#">テキスト<div><span>UPDATE</span></div></a> </div> <div class="btnBox"> <a href="#">テキスト</a> </div>
ただし、CSS3ですのでIE8以下では別途調整が必要ですね。