Show message with sideways inset

index.html

<div class='container'>
    <div class="row">
      <div class="col-md-4 epack">
        <h3>Header</h3>
      </div>
      <div class="col-md-4 success box-inset">
        <span class="green">Your data has been saved successfully!</span>
      </div>
      <div class="col-md-4 login">
        <h4>vishal anand</h4>
      </div>

    </div>
  </div>

show-message-with-sideways-inset.markdown

Show message with sideways inset

Apply only left and right box shadow and create an inset effect.

A Pen by Vishal Anand on CodePen.

License.

style.css

.container {
  background-color: #f5f5f5;
  border-bottom : 2px solid gray;
}

.epack {
  text-align: left;
}

.login {
  text-align: right;
}

.green {
  color: green;
  font-weight: bold;
}

.success {
  text-align: center;
  vertical-align: middle;
  line-height: 50px;
}

.box-inset {
  padding: 10px 20px;
  position: relative;
  color: #afafaf;
  background: #f5f5f5;
}

.box-inset:after {
  width: 100%;
  -ms-transform: skew(-30deg, 0deg);
  -webkit-transform: skew(-30deg, 0deg);
  transform: skew(-30deg, 0deg);
  box-shadow: inset -4px 1px 9px -6px;
}

.box-inset:before {
  width: 88%;
  z-index: 1;
  -ms-transform: skew(-30deg, 0deg);
  -webkit-transform: skew(-30deg, 0deg);
  transform: skew(30deg, 0deg);
  box-shadow: inset 4px 1px 9px -6px;
}

.box-inset:before,
.box-inset:after {
  content: " ";
  position: absolute;
  display: block;
  height: 100%;
  top: 0;
  left: 0;
  /*background: #f3f3f3;*/
  transform-origin: bottom left;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />