<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div style=" width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; background: #c7e5f1; "><div style="width: 200px;height: 300px;background: white;position: relative;overflow: hidden;border-radius: 10px;" class="div1"> <div class="div2" style=" height: 20px; width: 150px; background: #86deffb5; transform: rotate(-45deg); position: absolute; top: 0; left: 0; margin-left: -30px; padding: 0 25px; font-size: 12px ">Popular</div> </div></div>