HTML CSS examples for CSS Widget:Shape
Adding an arrow on both sides of a div using CSS
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> html, body { margin:26px; } .arrow_box {<!--from w ww. ja va 2 s. c o m--> position:relative; background:Chartreuse; border:5px solid yellow; width:201px; } .arrow_box:after, .arrow_box:before { bottom:100%; border:solid transparent; content:" "; height:0; width:0; position:absolute; } .arrow_box:after { border-color:blue; border-bottom-color:pink; border-width:31px; left:51%; margin-left:-31px; } .arrow_box:before { border-color:WhiteSmoke; border-bottom-color:OrangeRed; border-width:37px; left:51%; margin-left:-37px; } .arrow_box>div:after, .arrow_box>div:before { top:100%; border:solid transparent; content:" "; height:0; width:0; position:absolute; } .arrow_box>div:after { border-color:grey; border-top-color:BlueViolet; border-width:31px; left:51%; margin-left:-31px; } .arrow_box>div:before { border-color:Chartreuse; border-top-color:yellow; border-width:37px; left:51%; margin-left:-37px; } </style> </head> <body> <div class="arrow_box"> <div> bla! <br> bla! <br> bla! <br> bla! <br> bla! <br> bla! <br> </div> </div> </body> </html>