HTML CSS examples for CSS Widget:Arrow
Make an arrow pointing to right
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .arrow {<!--from w ww. j a v a 2 s .c om--> float:left; width:129px; height:100px; background-color:Chartreuse; border:2px solid yellow; position:relative; } .arrow:after { content:''; position:absolute; top:0px; left:129px; width:0; height:0; border:51px solid blue; border-left:13px solid pink; } .arrow:before { content:''; position:absolute; top:0px; left:130px; width:0; height:0; border:51px solid WhiteSmoke; border-left:13px solid OrangeRed; } </style> </head> <body> <div class="arrow"></div> <div class="arrow"></div> </body> </html>