html - 如何在不使用边框和宽度 : 0. 的情况下做到这一点 我正在尝试按百分比设置其宽度以提高设备灵活性

Question

.background
{
     border-top: 252px solid red;
     border-bottom: 252px solid red;
     border-left: 750px solid blue;
     border-right: 750px solid blue;
     width: 0;
}

是否可以使用百分比而不是 px 生成此形状，不使用边框会有很大帮助

Answer 1

你可以为此使用线性渐变:

body {
 height:100vh;
 margin:0;
}

.background {
  height:100%;
  background:
    linear-gradient(to top right,    blue 50%,red 50.2%) top,
    linear-gradient(to bottom right, blue 50%,red 50.2%) bottom;
 background-size:100% 50.1%;
 background-repeat:no-repeat;
}

<div class="background"></div>