html - CSS Box shadow custom shape issue -

i have tried box in image.

but can't shadow looks on bottom of box. have tried in css-matic box shadow can't shadow.

can give solution shadow. in advance :)

.ss_tag3 {    position: relative;    -webkit-transition: 200ms ease-in;    -webkit-transform: scale(1);    -ms-transition: 200ms ease-in;    -ms-transform: scale(1);    -moz-transition: 200ms ease-in;    -moz-transform: scale(1);    transition: 200ms ease-in;    transform: scale(0.8);  }  .ss_tag3 h1{    text-align:center;    }  .ss_tag3 .ss_head {    background: #2b557d;    padding: 2% 7% 7%;    position: relative;    box-shadow: 0 3px 3px #bdc3c9;  }  .ss_tag3 .ss_head:after {    content: '';    border: 28px solid transparent;    position: absolute;    left: 41.5%;    bottom: -42px;    border-top: 15px solid #2b557d;  }  .ss_tag3 .ss_head h1 {    text-transform: uppercase;    color: #fff;    border-bottom: 1px solid #20476f;    box-shadow: 0 1px 0 #3a6998;    font-weight: 800;    font-size: 32px;    padding-bottom: 7.4%;  }  .ss_tag3 .ss_head .ss_price {    padding-top: 4%;    padding-right: 0;    padding-left: 0;  }  .ss_tag3 .ss_head .ss_price .ss_left-div {    text-align: center;  }  .ss_tag3 .ss_head .ss_price .ss_left-div span {    color: #f7f7f8;    text-transform: capitalize;    font-size: 33px;    font-weight: 100;  }  .ss_tag3 .ss_list {    background: #fff;    padding: 14% 7% 7%;  }  .ss_tag3 .ss_list ul {    margin-bottom: 0;    list-style-type: none;  }  .ss_tag3 .ss_list ul li {    border-bottom: 1px solid #e3e3e3;    padding-bottom: 5%;    padding-top: 4%;  }  .ss_tag3 .ss_list ul li {    color: #406387;    font-size: 17px;    font-weight: 600;    padding: 0;  }  .ss_tag3 .ss_list ul li .ss_list-style {    padding: 0;  }  .ss_tag3 .ss_list ul li .ss_list-style:before {    content: "\2713\0020";    color: #406387;  }  .ss_tag3 .ss_list ul li .ss_list-content {    padding: 0;  }  .ss_tag3 .ss_list ul li a:hover {    text-decoration: none;  }  .ss_tag3 .ss_list ul li:last-child {    border-bottom: none;  }  .ss_tag3 .ss_list ul li:last-child .ss_list-style:before {    display: none;  }  .ss_tag3 .ss_foot-btn {    text-align: center;    background: #f5f5f5;    padding: 5% 0;  }  .ss_tag3 .ss_foot-btn .ss_order-btn {    text-transform: uppercase;    background: #2b557d;    border: 1px solid #2b557d;    color: #fff;    font-size: 15px;    font-weight: 600;    padding: 4px 12px;    outline: none;  }

<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 ss_tag3">  <div class="ss_head">   <h1>groups or teams</h1>   <div class="container-fluid ss_price">  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 ss_left-div">  <span> special pricing</span>   </div>   </div>  </div>     <div class="ss_list">  <ul>  <li><a class="container-fluid" href="#"><span class="col-lg-1 col-md-1 col-sm-1 col-xs-1 ss_list-style"></span><span class="col-lg-11 col-md-11 col-sm-11 col-xs-11 ss_list-content">   contact sales ask special pricing accounts on 5 people.</span></a></li>  <li><a class="container-fluid" href="#"><span class="col-lg-1 col-md-1 col-sm-1 col-xs-1 ss_list-style"></span><span class="col-lg-11 col-md-11 col-sm-11 col-xs-11 ss_list-content"> sales@aframesoftware. com</span></a></li>  </ul>  </div>  <div class="ss_foot-btn">  <button type="button" class="btn btn-primary ss_order-btn">contact now</button>  </div>  </div>

i added these few lines of code:

.ss_tag3 {   position:relative;          box-shadow:0 1px 0px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 0, 0, 0.1) inset; }  .ss_tag3:before, .ss_tag3:after {   content:"";   position:absolute;    z-index:-1;   box-shadow:0 0 20px rgba(0,0,0,0.4);   top:50%;   bottom:0;   left:40px;   right:40px;   border-radius:100px / 10px; } 

the :before , :after parts ones make shadow on bottom. feel free fiddle one. code snippet below.

.ss_tag3 {    position: relative;    -webkit-transition: 200ms ease-in;    -webkit-transform: scale(1);    -ms-transition: 200ms ease-in;    -ms-transform: scale(1);    -moz-transition: 200ms ease-in;    -moz-transform: scale(1);    transition: 200ms ease-in;    transform: scale(0.8);  }  .ss_tag3 h1{    text-align:center;    }  .ss_tag3 .ss_head {    background: #2b557d;    padding: 2% 7% 7%;    position: relative;    box-shadow: 0 3px 3px #bdc3c9;  }  .ss_tag3 .ss_head:after {    content: '';    border: 28px solid transparent;    position: absolute;    left: 41.5%;    bottom: -42px;    border-top: 15px solid #2b557d;  }  .ss_tag3 .ss_head h1 {    text-transform: uppercase;    color: #fff;    border-bottom: 1px solid #20476f;    box-shadow: 0 1px 0 #3a6998;    font-weight: 800;    font-size: 32px;    padding-bottom: 7.4%;  }  .ss_tag3 .ss_head .ss_price {    padding-top: 4%;    padding-right: 0;    padding-left: 0;  }  .ss_tag3 .ss_head .ss_price .ss_left-div {    text-align: center;  }  .ss_tag3 .ss_head .ss_price .ss_left-div span {    color: #f7f7f8;    text-transform: capitalize;    font-size: 33px;    font-weight: 100;  }  .ss_tag3 .ss_list {    background: #fff;    padding: 14% 7% 7%;  }  .ss_tag3 .ss_list ul {    margin-bottom: 0;    list-style-type: none;  }  .ss_tag3 .ss_list ul li {    border-bottom: 1px solid #e3e3e3;    padding-bottom: 5%;    padding-top: 4%;  }  .ss_tag3 .ss_list ul li {    color: #406387;    font-size: 17px;    font-weight: 600;    padding: 0;  }  .ss_tag3 .ss_list ul li .ss_list-style {    padding: 0;  }  .ss_tag3 .ss_list ul li .ss_list-style:before {    content: "\2713\0020";    color: #406387;  }  .ss_tag3 .ss_list ul li .ss_list-content {    padding: 0;  }  .ss_tag3 .ss_list ul li a:hover {    text-decoration: none;  }  .ss_tag3 .ss_list ul li:last-child {    border-bottom: none;  }  .ss_tag3 .ss_list ul li:last-child .ss_list-style:before {    display: none;  }  .ss_tag3 .ss_foot-btn {    text-align: center;    background: #f5f5f5;    padding: 5% 0;  }  .ss_tag3 .ss_foot-btn .ss_order-btn {    text-transform: uppercase;    background: #2b557d;    border: 1px solid #2b557d;    color: #fff;    font-size: 15px;    font-weight: 600;    padding: 4px 12px;    outline: none;  }          .box h3{  	text-align:center;  	position:relative;  	top:80px;  }  .box {  	width:70%;  	height:200px;  	background:#fff;  	margin:40px auto;  }    .ss_tag3  {    	position:relative;                 box-shadow:0 1px 0px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 0, 0, 0.1) inset;  }  .ss_tag3:before, .ss_tag3:after  {  	content:"";      position:absolute;       z-index:-1;      box-shadow:0 0 20px rgba(0,0,0,0.4);      top:50%;      bottom:0;      left:40px;      right:40px;      border-radius:100px / 10px;  }

<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 ss_tag3">  <div class="ss_head">   <h1>groups or teams</h1>   <div class="container-fluid ss_price">  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 ss_left-div">  <span> special pricing</span>   </div>   </div>  </div>     <div class="ss_list">  <ul>  <li><a class="container-fluid" href="#"><span class="col-lg-1 col-md-1 col-sm-1 col-xs-1 ss_list-style"></span><span class="col-lg-11 col-md-11 col-sm-11 col-xs-11 ss_list-content">   contact sales ask special pricing accounts on 5 people.</span></a></li>  <li><a class="container-fluid" href="#"><span class="col-lg-1 col-md-1 col-sm-1 col-xs-1 ss_list-style"></span><span class="col-lg-11 col-md-11 col-sm-11 col-xs-11 ss_list-content"> sales@aframesoftware. com</span></a></li>  </ul>  </div>  <div class="ss_foot-btn">  <button type="button" class="btn btn-primary ss_order-btn">contact now</button>  </div>  </div>