矩形div CSS

Question

我想使用一个矩形背景，如下图的红色部分。我该怎么做？

我想使用

之类的背景

#trapezium {
  height: 0;
  width: 50vw;
  border-bottom: 100vh solid #ec3504;
  border-left: 60px solid transparent;
}

Answer 1

您将需要使用 linear-background ，也许是这样的：

.testBG
{
    width: 100vw;
    height: 100vh;
    background: linear-gradient(115deg, #aaaaaa 50%, red 50%);
}

<div class="testBG"></div>

在下面的示例中，颜色停靠点（百分比）不只是为了模拟颜色之间的平滑过渡，还改变了角度：

.testBG
{
    width: 100vw;
    height: 100vh;
    background: linear-gradient(100deg, #aaaaaa 50%, red 51%);
}

<div class="testBG"></div>

.testBG
{
    width: 100vw;
    height: 100vh;
    background: linear-gradient(125deg, #aaaaaa 50%, red 80%);
}

<div class="testBG"></div>

Answer 2

您可以使用2个div来做到这一点（我可以在您的问题中看到您有两个单独的元素）。从边界制作形状。

在此处详细了解css形状-> the shapes of css

   .right {
     border-bottom: 200px solid red;
     border-left: 25px solid transparent;
     border-right: 0px solid transparent;
     height: 0;
     flex: 0 50%;
   }

   .left {
     flex: 0 50%;
   }

   .wrapper {
     width: 200px;
     height: 200px;
     display: flex;
     background: grey;
   }

<div class="wrapper">
  <div class="left">
    bbbbbbbbb bbbbbbbbbb bbbbbbbb bbbbbbb assssss sssssssssss
  </div>
  <div class="right">
    bbbbbbbbb bbbbbbbbbb bbbbbbbb bbbbbbb assssss sssssssssss
  </div>
</div>