如何在div中插入一条丝带如何没有图像的背景只有纯css？

Question

我想在div中添加背景功能区而不使用纯CSS的图像。

我尝试使用:after和:before，但没有运气。

功能区为绿色，必须与以下内容相同：

http://i.stack.imgur.com/eJsj9.png

这里有人可以帮助我吗？请记住 - 我的div可以随着内容的增长而增长。

Answer 1

我在:after伪元素上应用了一些变换。 Here's how：

.ribbon {
    background: #04F;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}
.ribbon:after {
    content:' ';
    position: absolute;
    background: #0F4;
    width: inherit;
    height: inherit;
    padding: inherit;
    top: 0;
    right: -70%;
    -webkit-transform: skew(-15deg, 0deg);
       -moz-transform: skew(-15deg, 0deg);
            transform: skew(-15deg, 0deg);
}

只需使用填充，文本对齐和颜色即可获得精确的效果。