html - 如何用CSS3改造DIV-Container

Question

我尝试像下图那样转换我的 div 容器。

左边是一个涂成黑色的普通 div 容器。右边是我想要的容器。

你知道如何在 css3 中解决这个问题吗？我在 css3 中阅读了一些关于“多边形”属性的内容，但我也听说该属性已被删除。

编辑:当内容在框中时，它会被隐藏 - 框就像“落在后面”。

Answer 1

我找到了一个 article不久前在 css-tricks.com 上讨论过这个问题。这可能有效:

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