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

我有一个在网页上设置背景的要求，我正在使用这张图片来实现这一点，但我相信应该有一种方法可以使用CSS3实现这一点，我知道你可以使用CSS3绘制对角线，但不确定如何使用CSS3为框体的其余部分着色

提前谢谢

我会在它上面放一个“三角形”，然后把它放在左边，这样它就会倾斜。您可以查看css3的

转换：skew

，但这样就不需要了。如果你愿意，这里有一个

只要做一个有一定高度的盒子，穿过上面的白色三角形<代码>溢出将隐藏（如果您有另一种颜色作为背景）

.集装箱{
宽度：100%；
溢出：隐藏；
}
#盒子{
背景色：红色；
位置：相对位置；
高度：150像素；
}
#盒子：之前{
位置：绝对位置；
内容：''；
边框底部：150px纯白；
左边框：150px实心透明；
右边框：150px实心透明；
左：-150px；
底部：0；
}

我根据我对你要找的东西的估计做了一个例子。。。我的意思是，我不知道确切的倾斜角度，所以我将其飞行45度：

HTML

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

参考：

---

是的，这是可能的。请随意更改课程以满足您的需要
CSS:
HTML:

---

这里是一个演示：
对于最基本的实现，您只需要三件事：
• 可以有边框的元素
• 彩色的

  边框顶部

• 左边透明的

  边框

  div{
  左边框：60px实心透明；
  边框顶部：60px实心rgba（140,25,29,1）；
  }

  ---

  谢谢大家，我看到有很多不同的方法可以达到相同的效果，但是由于我需要将此模式作为菜单的背景，我最终使用了下面的样式：

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

  ---

  无论何时处理形状，谷歌搜索：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);
  }
  

  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 */
  }
  

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

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