css直角梯形梯形怎么写 |多行文字超出隐藏css3

.trapezoid {
 width: 0;
 height: 0;
 border-bottom: 50px solid blue;
 border-left: 50px solid transparent;
 border-right: 50px solid transparent;
}

这段代码中的关键是使用transparent属性。它允许侧边框变成透明，从而创造出直角梯形的效果。此外，大家还需要一个具有零高度和宽度的容器，以便使梯形形状更加明显。

然而，大家很容易看到这个代码段制作的梯形只能通过指定像素值来制作。所以大家考虑一下，如何为梯形设置百分比值。

.trapezoid {
width: 50%;
height: 0;
padding-left: 25%;
padding-right: 25%;
overflow: hidden;
}
.trapezoid:before {
content: "";
display: block;
border-bottom: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
}

这段代码使用 padding 和 :before 选择器，通过设置数量百分比的值来创建具有不同高度的直角梯形。

总之，你可以使用这些css技巧来创造出许多形状，让你的网站看起来更加美观。