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

Question

如何以最佳方式实现以下图片中的以下内容？我想要一个厚厚的顶部边框，但是当它下降时，我希望两侧变得更薄，只是“修补”（如果这是正确的表达）进入黑色区块。

这是黑色块的CSS代码：

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

Answer 1

您可以使用after伪元素在元素后面放置一个倒置的梯形。

查看here以获取梯形形状示例。

body { padding: 30px; }

.containerMain {
  background: black;
  padding: 15px;
  border-radius: 5px;
  width: 250px;
  height: 250px;
  position: relative;
}

.containerMain:after {
  content: '';
  border-radius: inherit;
  margin: -20px;
  margin-top: -25px;
  width: 100%;
  height: 50%;
  position: absolute;
  z-index: -1;

  /* upside-down red trapezoid props */
  border-top-width: 150px;
  border-top-style: solid;
  border-top-color: red;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}

<div class="containerMain"></div>