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

Question

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

这是我的黑色 block 的 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>