0

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

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

在此处输入图像描述

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

  • 吉里哈
4

6 回答 6

1

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

你可以随意调整.

于 2013-06-07T14:14:45.730 回答
0

我给每个答案 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);
}
于 2013-06-06T20:24:15.563 回答
0

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

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

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

于 2013-06-06T20:00:20.353 回答
0

您可以使用

  1. 浮动或

  2. 绝对/固定位置

  3. 溢出：隐藏

    和变换：旋转（45度）；

于 2013-06-06T19:34:44.753 回答
0

检查此代码

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;

}

于 2013-06-07T14:06:51.197 回答
0

这是一种方法... 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 上的转换。然后使用图像的位置将其放置在您想要的位置。

于 2013-06-07T12:28:22.470 回答