HTML CSS examples for CSS Widget:Arrow
DIV with background pattern and transparent bottom arrow
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> #top{<!--from www. ja v a 2s . co m--> width:100%; height:100px; background:lightgrey; position:relative; } #arrow { position:absolute; bottom:0; width:100%; height:50px; background:rgba(0,0,0,0); } #bottom { width:100%; height:500px; background:grey; } .trapezoid { width: calc(50% - 50px); border-bottom: 50px solid grey; height: 0; display:block; } .left {float:left; border-right: 50px solid transparent;} .right {float:right; border-left: 50px solid transparent;} </style> </head> <body> <div id="top"> <div id="arrow"> <div class="my left"></div> <div class="trapezoid right"></div> </div> </div> <div id="bottom"></div> </body> </html>