成角度,将CSS功能区包裹在图像上

前端之家收集整理的这篇文章主要介绍了成角度,将CSS功能区包裹在图像上前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

只使用CSS就可以实现这个功能区吗?

最佳答案
HTML

Box">

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.除旋转之外的所有内容仍然适用于旧浏览器.)

猜你在找的CSS相关文章