HTML CSS examples for CSS Widget:Arrow
create an arrow with a gradient using transform and rotate
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> div {<!-- ww w . ja va 2 s . c om--> width: 50px; height: 100px; position: relative; margin: 100px; background: -webkit-linear-gradient(top, red 0%,#2989d8 100%); background: -moz-linear-gradient(top, red 0%, #2989d8 100%); } div:after { z-index: -1; content: ""; display: block; position: absolute; left: -125px; top: -51px; margin: 100px; height: 100px; width: 100px; background: #c00; -webkit-transform:rotate( -45deg ); -moz-transform:rotate( -45deg ); transform:rotate( -45deg ); background: -webkit-linear-gradient(45deg, red 0%, #2989d8 50%, #ffffff 50%, #ffffff 100%); background: -moz-linear-gradient(45deg, red 0%, #2989d8 50%, #ffffff 50%, #ffffff 100%); } </style> </head> <body> <div> </div> </body> </html>