html - 右上角带有数据和状态的 HTML Div

Question

我试图让这个工作，但在网上找不到任何东西。我需要的是一个简单的 div（110 像素高度 * 230 像素宽度）。它上面有两个文本（标题和描述）。但我需要在右上角显示一个状态，并带有一些文字。

下面是我正在尝试实现的样机图片。

有人可以帮我解决这个问题吗..

• 吉里哈

Answer 1

JS Fiddle我从这里剪掉了它： http: //css-tricks.com/snippets/css/corner-ribbon/

你可以随意调整.

Answer 2

我给每个答案 2 分钟的时间。这是我解决这个html的努力

<div class="wrapper status1">
  <h2>Header</h2>
  <p>Description</p>
</div>

CSS

.wrapper {
  position: fixed;
  right: 0;
  top: 0;
  background-repeat: no-repeat;
  background-position: top right;
}
.wrapper h2 {
 font-size: 14px;
 font-weight: bold;
}
.wrapper p {
 margin: 10px 0 0 0;
 line-height: 18px;
}
.wrapper .status1 {
  background-image: url(image1.png);
}
.wrapper .status2 {
  background-image: url(image2.png);
}
.wrapper .status3 {
  background-image: url(image3.png);
}

Answer 3

在这种情况下，我通常会相对定位包含的 div，然后

position: absolute;
top: 0;
right: 0;

您选择使用的相关标签，瞧！

Answer 4

您可以使用

1. 浮动或

2. 绝对/固定位置

3. 溢出：隐藏

   和变换：旋转（45度）；

Answer 5

检查此代码

http://jsfiddle.net/2Tdvf/1/

HTML

<div class="container">
<div>Header</div>
<div>Description</div>
<div>STATUS</div>

CSS

.container{
font-family: arial;
font-size:13px;
width: 230px;
height: 110px;
background:green;
color:#fff;
position:relative;
overflow:hidden;
padding:7px;

}

.container>div:last-child{
position:absolute;
top:8%;
right:-6%;
transform:rotate(45deg);
width:70px;
background:#333;
text-align:center;

}

.container>div:nth-child(1){
font-size:1.2em;
margin-bottom:5px;

}

Answer 6

这是一种方法... http://jsfiddle.net/PrghL/

HTML

 <div class="wrapper">
      <h2>Header</h2>
      <p>Description</p>
      <div class="status">Status</div>
    </div>

CSS

 .wrapper{
        width:230px;
    height:110px;
    background:#00AB66;   
        position:relative;

    }
.status{
    position:absolute;
    top:10px;
    right:0;
    transform:rotate(47deg);
-ms-transform:rotate(47deg); /* IE 9 */
-webkit-transform:rotate(47deg); /* Safari and Chrome */


}

但如果我是你，我会使用图像来表示状态。它看起来更专业，更整洁。

如果您使用图像，则只需删除状态 div 上的转换。然后使用图像的位置将其放置在您想要的位置。