HTML CSS examples for CSS Widget:Arrow
Css arrow with bottom border
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> body{background-color:pink} .parent {<!--from www . j a va 2 s. c o m--> margin:20px; height: 200px; width: 200px; background-color: blue; border:#000 solid 2px; position:relative; } .parent div{ position:absolute; width:30px; height:20px; top:-2px; left:10px; overflow:hidden; } .parent div:after{ content:''; width:20px; height:20px; background:#fff; position:absolute; -moz-transform:rotate(45deg); -webkit-transform:rotate(45deg); transform:rotate(45deg); border-right:#000 solid 2px; border-bottom:#000 solid 2px; top:-10px; left:5px; } </style> </head> <body> <div class="parent"> <div></div> </div> </body> </html>