HTML CSS examples for CSS Widget:Arrow
Styling DIV Arrow Outlines
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> body {<!-- ww w.j a va 2 s . c o m--> height: 1000px; background-color: black; } .chevron { position: absolute; width: 500px; height: 20px; bottom: 25px; background-color: green; -webkit-border-radius: 30px; border-radius: 30px; color: red; } .left { left: 0px; -webkit-transform: rotate(340deg); -moz-transform: rotate(-5deg); -o-transform: rotate(340deg); -ms-transform: rotate(340deg); transform: rotate(-5deg); box-shadow:4px 2px 2px #00ff00; } .right { left: 480px; -webkit-transform: rotate(20deg); -moz-transform: rotate(5deg); -o-transform: rotate(20deg); -ms-transform: rotate(20deg); transform: rotate(5deg); box-shadow:4px 2px 2px #00ff00; } </style> </head> <body> <div class="chevron left"></div> <div class="chevron right"></div> </body> </html>