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

（PS。除了旋转之外的所有东西仍然可以在旧版浏览器中使用。）

Answer 2

一些 CSS 转换是可能的，不幸的是，这些转换并没有得到普遍支持。请参阅此处的（快速）示例：http: //codepen.io/anon/pen/kBpcK