Apply only left and right box shadow and create an inset effect.
A Pen by Vishal Anand on CodePen.
<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> |
Apply only left and right box shadow and create an inset effect.
A Pen by Vishal Anand on CodePen.
.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; | |
} |
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> |