css - 画像上にCSSリボンを折り返す角度付き

Question

CSSのみを使用してこのリボンを実現することは可能ですか？

Answer 1

HTML：

<div class="box">
    <div class="ribbon">
        <div class="txt">
            Example Text
        </div>
    </div>
<div>​

CSS：

.box {
    width: 300px;
    height: 300px;
    background-color: #a0a0a0;
    position: relative;
}
.ribbon {
  -webkit-transform: rotate(-45deg); 
     -moz-transform: rotate(-45deg); 
      -ms-transform: rotate(-45deg); 
       -o-transform: rotate(-45deg); 
          transform: rotate(-45deg); 
    border: 25px solid transparent;
    border-top: 25px solid #757575;
    position: absolute;
    bottom: 20px;
    right: -50px;
    padding: 0 10px;
    width: 120px;
    color: white;
    font-family: sans-serif;
    size: 11px;
}
.ribbon .txt {
    position: absolute;
    top: -20px;
    left: 20px;
}​

例：

http://codepen.io/gilluminate/pen/jusoI

（追記。ローテーション以外はすべて、古いブラウザでも機能します。）

Answer 2

残念ながら、普遍的にサポートされていない一部のCSS変換で可能です。ここで（クイック）例を参照してください：http： //codepen.io/anon/pen/kBpcK