Box shadow bottom like bracket - html

Question

I am trying to implement bracket at bottom of a div. here my shadow will be like bracket .
I tried below section. Bur problem is it's taking full left right section. I want like this image. any suggestion will be appreciable.
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

You can use gradient for this:
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>
Or a pseudo element like this:
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>
Or border-image with gradient:
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>

Answer 2

You can do it with the :before and :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>