HTML CSS examples for CSS Widget:Arrow
Creating an arrow with :before
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> #arrowbox<!--from w w w.j av a 2 s .c om--> { padding:10px; border-left:2px solid blue; background: #000; width:200px; height: 80px; position: relative; } #arrowbox:before { width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 10px solid blue; content: " "; left: -10px; top: 50px; z-index: 100000; position: absolute; } </style> </head> <body> <div id="arrowbox"></div> </body> </html>