HTML CSS examples for CSS Widget:Arrow
Creating an arrow shape in CSS
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> nav li a { float:left; height:24px; line-height:25px; padding:2px 11px 0 25px; color:Chartreuse; background-color:yellow; text-align:center; width:76%; } nav li a:before { content:"";<!-- ww w .j av a 2 s . com--> float:left; position:absolute; top:0; left:0; width:0; height:0; border-color:blue; border-style:solid; border-width:13px 13px 13px 13px; } nav li a:after { content:""; float:left; position:absolute; top:0; right:0px; width:0; height:0; border-color:pink; border-style:solid; border-width:13px 13px 13px 13px; } nav li { list-style-type:none; width:201px; position:relative; } nav li a { text-decoration:none; } nav li:after { content:""; float:left; position:absolute; top:0; width:0; height:0; border-color:OrangeRed; border-style:solid; border-width:13px 13px 13px 13px; border-radius:51%; } </style> </head> <body> <nav> <li> <a href="#">Lorem</a> </li> </nav> </body> </html>