成角度，将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

Answer 3

是的，你可以。

例如：

<div id="full_img_content">
 <span id="img_ribbon">  
   <img src="#" id="">
 </span>
</div>

你会拥有CSS中的

#full_img_content
{
 float:left;
 width:400px; (slightly larger than image width)
 height:400px; (slightly larger than image height)
}
#full_img_content img // your image (if your img have this size)
{
 width:390px;
 height:390px;
 z-index: 1;
}
#img_ribbon
{
 background-image: url("link to img");
 background-positiom: x-pos y-pos bottom right;
 z-index: 2;
}