<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<section class="nb-demo">
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="attention-box">
<h4>Default</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus felis diam, vulputate in risus eu, porttitor condimentum purus. Phasellus ullamcorper, odio id feugiat bibendum, nisi felis ultrices neque, vel consectetur lacus velit vitae leo. Sed eu nunc vitae nunc consequat ullamcorper id ut nisl. Phasellus euismod ut libero congue bibendum. Ut at varius quam, venenatis sollicitudin nibh. Suspendisse lacus nisi, lobortis non tempor sit amet, sagittis at risus. Aliquam erat volutpat.
</p>
</div>
</div>
<div class="col-sm-6">
<div class="attention-box warning">
<h4>Warning</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus felis diam, vulputate in risus eu, porttitor condimentum purus. Phasellus ullamcorper, odio id feugiat bibendum, nisi felis ultrices neque, vel consectetur lacus velit vitae leo. Sed eu nunc vitae nunc consequat ullamcorper id ut nisl. Phasellus euismod ut libero congue bibendum. Ut at varius quam, venenatis sollicitudin nibh. Suspendisse lacus nisi, lobortis non tempor sit amet, sagittis at risus. Aliquam erat volutpat.
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="attention-box danger">
<h4>Danger</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus felis diam, vulputate in risus eu, porttitor condimentum purus. Phasellus ullamcorper, odio id feugiat bibendum, nisi felis ultrices neque, vel consectetur lacus velit vitae leo. Sed eu nunc vitae nunc consequat ullamcorper id ut nisl. Phasellus euismod ut libero congue bibendum. Ut at varius quam, venenatis sollicitudin nibh. Suspendisse lacus nisi, lobortis non tempor sit amet, sagittis at risus. Aliquam erat volutpat.
</p>
</div>
</div>
<div class="col-sm-6">
<div class="attention-box success">
<h4>Success</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus felis diam, vulputate in risus eu, porttitor condimentum purus. Phasellus ullamcorper, odio id feugiat bibendum, nisi felis ultrices neque, vel consectetur lacus velit vitae leo. Sed eu nunc vitae nunc consequat ullamcorper id ut nisl. Phasellus euismod ut libero congue bibendum. Ut at varius quam, venenatis sollicitudin nibh. Suspendisse lacus nisi, lobortis non tempor sit amet, sagittis at risus. Aliquam erat volutpat.
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="attention-box primary">
<h4>Primary</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus felis diam, vulputate in risus eu, porttitor condimentum purus. Phasellus ullamcorper, odio id feugiat bibendum, nisi felis ultrices neque, vel consectetur lacus velit vitae leo. Sed eu nunc vitae nunc consequat ullamcorper id ut nisl. Phasellus euismod ut libero congue bibendum. Ut at varius quam, venenatis sollicitudin nibh. Suspendisse lacus nisi, lobortis non tempor sit amet, sagittis at risus. Aliquam erat volutpat.
</p>
</div>
</div>
</div>
</div>
</section>
.attention-box{
margin-top: 30px;
position: relative;
padding: 20px 20px 20px 25px;
border: 1px solid #f0f0f0;
overflow: hidden;
}
.attention-box:after{
content: "";
position: absolute;
top: -1px;
right: -1px;
left: -1px;
height: 500px;
width: 200px;
transform:rotate(-45deg);
z-index: -1;
border-radius: 50%;
background-color: #fafafa;
}
.attention-box:before {
content: "";
position: absolute;
top: -1px;
right: -1px;
left: -1px;
height: 5px;
background-color: #ccc;
}
.attention-box.primary:before{
background-color: #337AB7;
}
.attention-box.primary:after{
background-color: rgba(51,122,183,0.1);
}
.attention-box.success:before{
background-color: #5cb85c;
}
.attention-box.success:after{
background-color: rgba(92,184,92,0.1);
}
.attention-box.warning:before{
background-color: #f0ad4e;
}
.attention-box.warning:after{
background-color: rgba(240,173,78,0.1);
}
.attention-box.danger:before{
background-color: #D9534F;
}
.attention-box.danger:after{
background-color: rgba(217,83,79,0.1);
}
