.InscriptionID { background: rgba(146, 147, 155, 0.6); color: #fff; padding: 5px; text-align: center; border-radius: 10px 10px 10px 10px; } * { box-sizing: border-box; } .block { width: 100px; height: 100px; margin: 20px auto; position: absolute; left: 500px; top: 200px; } .border { position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; } .block:before, .block:after, .border:before, .border:after { position: absolute; width: 18px; height: 18px; content: ''; border-color: #06db34; border-style: solid; } .block:before { left: 0px; top: 0px; border-width: 2px 0 0 2px; } .block:after { right: 0px; top: 0px; border-width: 2px 2px 0 0; } .border:before { right: 0px; bottom: 0px; border-width: 0 2px 2px 0; } .border:after { left: 0px; bottom: 0px; border-width: 0 0 2px 2px; } 
 <div class="block"> <div class="border"></div> <div class="InscriptionID" id="namesID">Светлана</div> </div>


It turns out such a result, and I can’t move the inscription under the frame.
It turns out such a result, and I can’t move the inscription under the frame.

    2 answers 2

     .InscriptionID { position: relative; background: rgba(146, 147, 155, 0.6); color: #fff; padding: 5px; text-align: center; border-radius: 10px 10px 10px 10px; top: 100%; } * { box-sizing: border-box; } .block { width: 100px; height: 100px; margin: 20px auto; position: absolute; left: 500px; top: 200px; } .border { position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; } .block:before, .block:after, .border:before, .border:after { position: absolute; width: 18px; height: 18px; content: ''; border-color: #06db34; border-style: solid; } .block:before { left: 0px; top: 0px; border-width: 2px 0 0 2px; } .block:after { right: 0px; top: 0px; border-width: 2px 2px 0 0; } .border:before { right: 0px; bottom: 0px; border-width: 0 2px 2px 0; } .border:after { left: 0px; bottom: 0px; border-width: 0 0 2px 2px; } 
     <div class="block"> <div class="border"></div> <div class="InscriptionID" id="namesID">Светлана</div> </div> 

       .InscriptionID { background: rgba(146, 147, 155, 0.6); color: #fff; padding: 5px; text-align: center; border-radius: 10px 10px 10px 10px; position: absolute; left: 10px; top: 105px; }