在css中创建从粗到细的边框/框阴影

如下图所示，我如何尽可能以最佳方式实现以下目标？我想要一个厚的顶部边框，但随着它的下降，我希望两边变得更薄，只是“修补”（如果这是正确的表达）到黑色块中

这是我的黑块CSS代码：

.containerMain {
    background: #000;
    padding: 15px;
    border-radius: 5px;
    width: 250px;
}

可以使用伪图元将倒置梯形放置在图元后面

寻找一个梯形形状的例子

body{padding:30px；}
集装箱司机{
背景：黑色；
填充：15px；
边界半径：5px；
宽度：250px；
高度：250px；
位置：相对位置；
}
.containerMain:之后{
内容：''；
边界半径：继承；
利润率：-20px；
利润上限：-25px；
宽度：100%；
身高：50%；
位置：绝对位置；
z指数：-1；
/*倒立红色梯形道具*/
边框顶部宽度：150px；
边框顶部样式：实心；
边框顶部颜色：红色；
左边框：5px实心透明；
右边框：5px实心透明；
}

---

使用单个CSS属性或标记无法做到这一点，您需要一种变通方法来实现您的目标。正如您所要求的，最好的方法是祝您好运。最好的方法是创建一个新块（使用：：before或：：after），并为其提供所需的大小和/或透视图。我想这是可行的。将不得不修改一点，但感谢分享您的方法！没问题，希望有帮助