Skip to content

Instantly share code, notes, and snippets.

@codingonHP
Created September 7, 2016 06:56
Show Gist options
  • Save codingonHP/4c14649d30af7e5be283631784614563 to your computer and use it in GitHub Desktop.
Save codingonHP/4c14649d30af7e5be283631784614563 to your computer and use it in GitHub Desktop.
Show message with sideways inset
<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>
.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" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment