css - 在CSS中是否可以使div的顶部宽度为“A”，底部宽度为“B”，因此右侧为对 Angular 线？

我想在CSS中创建具有斜边的内联块div，其顶部宽度为200px，底部宽度为100px。这可能吗？如果是这样，怎么办？或有人会建议什么作为更好的选择？

最佳答案

HTML的框模型暗示div始终是矩形。但是，使用某些技术可以得到非常不错的结果。最简单的方法就是也使用CSS来着色您所需背景的一部分。将width设置为较宽的一侧，然后使用左边框的right和bottom属性调整形状。例如：

.myDiv {
  border-bottom: 50px solid #555;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  height: 0;
  width: 125px;
}

您可以在这里看到它的工作：https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_shapes_trapezoid
w3school也有一个非常有趣的页面，其中包含许多可以使用CSS创建的形状。在这里检查：https://www.w3schools.com/howto/howto_css_shapes.asp