HTML CSS examples for CSS Widget:Arrow
Change border height to create an arrow pointing down
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .box {<!-- w ww. j av a2 s. com--> width: 200px; height: 120px; position: relative; background-color: #88b7d5; } .box:after { top: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; border-color: rgba(136, 183, 213, 0); border-top-color: #88b7a1; border-width: 100px; margin-left: -100px; } </style> </head> <body> <div class="box"> <div class="content"></div> </div> </body> </html>