css - 可以使用css3创建这样的背景吗？

Question

我需要在网页上设置这个背景，并且我正在使用这个图像来做到这一点，但我相信应该有一种方法可以使用 CSS3 来做到这一点，我知道你可以使用 css3 绘制对 Angular 线，但不确定如何使用 css3 为框的其余部分着色。

提前致谢!

Answer 1

是的，这是可能的。请随意更改类(class)以满足您的需求。

CSS:

body {
    position: relative;
}
.options_wrapper {
    width: 500px; /* Change to suit your needs */
    height: 80px; /* Change to suit your needs */
    position: absolute;
    top: 0;
    right: 0;
}
.options {
    width: 100%;
    height: 100%;
    box-shadow: 1px 0 rgba(0, 0, 0, 0.15);
    float: left;
    position: relative;
    overflow: hidden;
}
.options:before {
    width: 100%;
    height: 100%;
    background: #8A0808;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 1px 0 rgba(255, 255, 255, 1);
    content:'';
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: top left;
    transform: skewX(45deg); /* Change to suit your needs */
}

HTML:

<div class="options_wrapper">
    <div class="options"></div>
</div>

这是一个演示:jsFiddle DEMO