<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 ----------> <div class="container"> <div class="row"> <div class="col-md-5 approver-sprovider"> <h3 class="approver-num text-center">1</h3> </div> <div class="col-md-5 workflow-person"> <h4 class="mtop-30 text-center">Cloud Administrator</h4> <div class="mtop-10 text-center"> <span class="">Service Provider</span> <span class="">@</span> <span class="">Tenant</span> </div> </div> </div> <div class="row"> <div class="col-md-5 approver-tenant"> <h3 class="approver-num text-center">2</h3> </div> <div class="col-md-5 workflow-person"> <h4 class="mtop-30 text-center">Sponsor</h4> <div class="mtop-10 text-center"> <span class="">Service Provider</span> <span class="">@</span> <span class="">Tenant</span> </div> </div> </div> </div>

.tr { margin-top: 25px; } .mtop-10 { margin-top: 10px; } .mtop-30 { margin-top: 30px; } .approver-num { font-size: 30px; position: absolute !important; color: #fff; margin-left: 49px; margin-top: 40px; } .approver-sprovider { width: 150px; height: 98px; background: #76b900; position: relative; } .approver-sprovider:before { content: ""; position: absolute; left: 0; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 25px solid #76b900; } .approver-sprovider:after { content: ""; position: absolute; bottom: -25px; left: 0; width: 0; height: 0; border-left: 70px solid transparent; border-right: 80px solid transparent; border-top: 25px solid #76b900; } .approver-tenant { width: 150px; height: 98px; background: #556e4f; position: relative; z-index: -1; } .approver-tenant:before { content: ""; position: absolute; left: 0; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 25px solid #556e4f; } .approver-tenant:after { content: ""; position: absolute; bottom: -25px; left: 0; width: 0; height: 0; border-left: 70px solid transparent; border-right: 80px solid transparent; border-top: 25px solid #556e4f; } .workflow-person { width: 250px; height: 100px; background: rgba(237,237,237,1); border: 1px solid #f2f2f2; }