是否可以使用 css3 创建这样的背景？

Question

我需要在网页上设置这个背景，我正在使用这张图片来做到这一点，但我相信应该有一种方法可以使用 CSS3 来做到这一点，我知道你可以画画使用 css3 的对角线，但不确定如何使用 css3.

为框的其余部分着色

提前致谢！

Answer 1

我会在上面放一个 "triangle" 并将它放在左边，这样它就会倾斜。您可以查看 transform: skew for css3，但这样就不需要了。如果你想要 - 这里有一个 good example

做一个一定高度的盒子，穿过上面的白色三角形。 overflow 将隐藏（如果您有其他颜色作为背景）。

<div class="container">
    <div id="box"></div>
<div>

.container {
    width: 100%;
    overflow: hidden;
}
#box {
    background-color: red;
    position: relative;
    height: 150px;
}
#box:before {
    position: absolute;
    content:'';
    border-bottom: 150px solid white;
    border-left: 150px solid transparent;
    border-right: 150px solid transparent;
    left: -150px;
    bottom: 0;
}

Answer 2

我根据我对你正在寻找的东西的估计做了一个例子......估计我的意思是我不知道确切的倾斜角度，所以我将它倾斜了 45 度：

Link to JSFiddle

HTML

<div class="container">
    <div id="parallelogram">
    </div>
</div>

CSS

.container{
    overflow:hidden;
}
#parallelogram {
    width: 100%;
    height: 100px;
    margin: 0 0 0 45px;
    -webkit-transform: skew(40deg);
       -moz-transform: skew(40deg);
         -o-transform: skew(40deg);
    background: #8C191D;
    overflow:hidden;
    position:relative;
    -moz-box-shadow: 1px 2px 3px rgba(0,0,0,.5);
    -webkit-box-shadow: 1px 2px 3px rgba(0,0,0,.5);
    box-shadow: 1px 2px 3px rgba(0,0,0,.5);
}

参考：

Stack Overflow css3-transform-skew-one-side
CSS Tricks - ShapesOfCSS

Answer 3

是的，这是可能的。请随意更改类以满足您的需要。

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

Answer 4

对于最基本的实现，您只需要 3 样东西:

可以有边框的元素；
彩色border-top;
透明border-left;

div { 
border-left: 60px solid transparent;
border-top: 60px solid rgba(140, 25, 29, 1);
}

<div> 
</div>

Answer 5

谢谢大家，我看到有很多不同的方法可以实现相同的结果，但是由于我需要将这种图案作为菜单的背景，所以我最终使用了以下样式：

.navbar {
background: linear-gradient(45deg, white 25%, 
    rgba(140, 25, 29, 1) 25%);
    background-size: 100% 100%;
    background-repeat: no-repeat;
height: 90px;   
 }

是否可以使用 css3 创建这样的背景？

is it possible to create a background like this using css3?

css

css-transitions

css-shapes