css - 矩形 div css

Question

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

我想使用类似的背景

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

标签： css

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>