<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.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 ----------> <div class="container"> <div class="center"> <div class="pencil"> <p> Prakash Prajapati </p> <div class="top"></div> </div> </div> </div>

body { margin: 0; padding: 0; font-family: verdana; } .center { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(-45deg); } .pencil { width: 400px; height: 35px; background: #ffc334; border-top: 10px solid #ffd268; border-bottom: 10px solid #e2af38; } .pencil p { margin: 0; padding: 0; text-align: center; font-size: 8px; line-height: 20px; text-transform: uppercase; font-weight: bold; color: #d09200; } .pencil:before { content: ''; position: absolute; left: -80px; top: 0; border-style: solid; border-color: transparent #e29663 transparent transparent; border-width: 17px 40px 19px; } .pencil:after { content: ''; position: absolute; left: -80px; top: 0; border-style: solid; border-color: transparent #262626 transparent transparent; border-width: 17px 40px 18px; transform: scale(.3); } .top { position: absolute; top: 0; right: 0; height: 35px; width: 35px; background: #d76f6e; border-top: 10px solid #da8e8d; border-bottom: 10px solid #c85957; } .top:before { content: ''; position: absolute; top: -10px; right: -100%; width: -150%; height: 100%; background: #d76f6e; border-top: 10px solid #da8e8d; border-bottom: 10px solid #c85957; border-top-right-radius: 5px; border-bottom-right-radius: 5px; }