在CSS中是否可以创建顶部宽度为'；A'；底部宽度为'；B'；那么右边是对角线？

我想在CSS中创建具有对角线边的内联块div，顶部宽度为200px，底部宽度为100px。这可能吗？如果是，怎么做？或者有人会建议什么更好的替代方法？

HTML的box模型意味着div始终是矩形。但是，使用一些技术可以得到非常好的结果。最简单的一种方法就是使用css来着色你需要的背景部分。将

宽度设置为较宽的一侧，然后使用边框的左右和底部属性来调整形状。例如：

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

您可以看到它在这里工作：
w3school还有一个非常有趣的页面，其中有许多可以用css创建的形状。点击这里：
你想创建一个梯形吗

.trapezoid {
    border-top: 100px solid red;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    height: 0;
    width: 100px;
}


。梯形{
边框顶部：100px纯红；
左边框：50px实心透明；
右边框：50px实心透明；
身高：0；
宽度：100px；
}


描述您需要什么。背景/边界？您也可以使用SVG来实现这一点。这个对角线形状只是视觉上的，但元素实际占用的空间仍然是矩形。可能是图像可以更好地传达您的想法。严格来说不是。特别是当我们谈论内容时，例如，文本行实际上是不同长度的，或者以非矩形的方式在图像中裁剪。但是，可以使用非矩形边框。还请注意，你可以倾斜一个div，但最终还是会得到一个平行四边形。谢谢你的回答。它实际上是一个全宽度的横幅，被分成几个部分。每个部分都有不同的信息。请看这张图片了解想法，但画红线时是div的侧面。这是一个很好的选择！我想我也许能处理这个问题。非常感谢！以下是我的想法：这里有一些更高级的形状：@Dayley然后查看此形状感谢您提供的形状列表，它们也可能在Pascal的某个时候派上用场。这就是我这次使用的形状。谢谢！