如何用css在div上制作一个功能区？

Question

我想制作一张像这样的图片：

教我如何做到这一点？

Answer 1

我认为这就是你想要的：http://www.cssportal.com/css-ribbon-generator/

你底部有html代码和css。下次搜索一下。

Answer 2

基本想法是rotate div并使用absolute位置移动它。在您给出的示例中，您可能希望将其移动到顶部和左侧。

我已为此完成了基本布局，请随时编辑值和CSS并对其进行测试。

＆＃13;

＆＃13;

* {padding:0;margin:0;}

#container {background-color:red;padding:2px;height:600px;}

#ribbon {
  background-color:green;
  padding:2px;
  width:100px;
  -ms-transform: rotate(-45deg); 
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  transform: rotate(-45deg);
  position: absolute;
  top:15px;
  left: -25px;
  
  font-size:12px;
  text-align:center;
  }

＆＃13;

<div id="container">
  
  <div id="ribbon">
  Special Offer
  </div>
  
</div>

＆＃13;

＆＃13;

＆＃13;