左上角和右下角色带

Question

我想在盒子的左上角和右下角画一个带子，（参见下图），但是没有成功。

那个盒子有一个背景颜色，它会有一些文字，所以当盒子拉伸时，色带需要保持它们的位置。这似乎很容易，所以希望有人能帮助我。

Answer 1

使用绝对定位将两个div放入top:0;left:0;和bottom:0;right:0;。在你的CSS中像这样：

#box{
    position:relative;
    /* your styles... */
}
#box:before,#box:after{
    content:'';
    position:absolute;
    width:100px;height:50px;
}
#box:before{
    top:0;left:0;
    background:#0f0; /* you could put some kind of image here */
}
#box:after{
    bottom:0;right:0;
    background:#0f0; /* you could put some kind of image here */
}

有关正常工作的演示，请参阅此JSFiddle。

Answer 2

您可以使用绝对定位。它会是这样的：

http://jsfiddle.net/myajouri/389hQ/

.green-box {
  position: relative;
  /* other styles */
}

.green-box:before,
.green-box:after {
  content: "";
  display: block;
  position: absolute;
  width: 100px;  /* ...or whatever */
  height: 50px; /* ...or whatever */
}

.green-box:before {
  top: 0;
  left: 0;
  background-image: url("wherever the ribbon image is") left top no-repeat;
}

.green-box:after {
  bottom: 0;
  right: 0;
  background-image: url("wherever the ribbon image is") right bottom no-repeat;
}

这应该适用于IE8及以上+现代浏览器。如果您不关心IE8，那么您可以使用CSS变换来旋转相同的图像，而不是使用两个不同的图像。

Answer 3

尝试使用position：fixed;通过CSS