盒子阴影底部像括号

Question

我正在尝试在 div 的底部实现括号。在这里我的影子会像支架一样。我试过下面的部分。 Bur 问题是它占用了整个左右部分。我想要这个图像。任何建议将是可观的。

div{
-webkit-box-shadow:0px 1px 1px #de1dde;
 -moz-box-shadow:0px 1px 1px #de1dde;
 box-shadow:0px 1px 1px #de1dde;
 height:100px;
  }

<div>wefwefwef</div>

Answer 1

您可以使用 :before 和 :after pseudo-elements:

div {
  position: relative;
  -webkit-box-shadow: 0px 1px 1px #de1dde;
  -moz-box-shadow: 0px 1px 1px #de1dde;
  box-shadow: 0px 1px 1px #de1dde;
  height: 100px;
}

div:before,
div:after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 1px; /* adjust */
  height: 10px; /* adjust */
  background: #de1dde;
}

div:before {
  left: 0;
}

div:after {
  right: 0;
}

<div>wefwefwef</div>

Answer 2

你可以为此使用渐变：

div {
  margin: 20px;
  width: 300px;
  height: 50px;
  padding:3px;
  background:linear-gradient(to right,blue 3px,transparent 0px,transparent calc(100% - 2px),blue 0) 0 100%/ 100% 30px no-repeat,
  linear-gradient(to top,blue 2px,transparent 0);
}

<div>wefwefwef</div>

或者像这样的伪元素：

div {
  margin: 20px;
  width: 300px;
  height: 50px;
  padding:3px;
  position:relative;
}
div:before {
  content:"";
  position:absolute;
  bottom:0;
  height:20px;
  left:0;
  right:0;
  border:2px solid blue;
  border-top:none;
}

<div>wefwefwef</div>

或border-image渐变：

div {
  margin: 20px;
  width: 300px;
  height: 50px;
  padding:3px;
  border: 3px solid transparent;
  border-image: linear-gradient(to bottom,transparent 60%,blue 0) 10;
}

<div>wefwefwef</div>

盒子阴影底部像括号

Box shadow bottom like bracket

html

css

border

box-shadow