带有css和长方体阴影的梯形

我正在考虑制作一个梯形图，上面有一个比底部宽10像素的长方体阴影。在过去，我制作了一个梯形，如下图所示，但是您会注意到，如果我在元素上放置一个长方体阴影，它会将外层宽度框成一个矩形，而不是在倾斜的边框上放置一个阴影：

#trapezium {
   margin:20px auto;
   height: 0;
   width: 80px;
   border-bottom: 80px solid blue;
   border-left: 40px solid transparent;
   border-right: 40px solid transparent;
   box-shadow:0 0 10px #333;
}

我最初的想法是使用以下内容：

-webkit-transform:perspective(100) rotateX(1deg);

差不多吧。虽然这肯定开始解决这个问题，但我不确定100这个数字在“透视图”中指的是什么，也不知道如何计算出一个公式来确保顶部宽度比底部宽度精确10px，而不管这个元素有多高或多宽

---

有什么建议吗？或者第三种选择来实现这一点？

您构建的不是梯形（又称梯形）形状的元素；它是一个矩形元素，边框样式创建了梯形的外观。这就是为什么长方体阴影是矩形的

使用专有的-webkit transform属性不会改变实际元素的形状

---

要创建真正的非矩形元素，需要使用SVG。看到或看到

我做了类似的事情，所以我相信这是可能的。遗憾的是，我现在没有时间做这件事，可能根本没有机会做，更不用说很快了。我希望这个答案能对你有所帮助！（但是，如果我有机会，我会努力解决这个问题。）