CSSだけでたすき掛けの新着マークを表示する

表示サンプルはこちら

サンプル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以下では別途調整が必要ですね。