HTML CSS examples for CSS Widget:Shape
Make a circle with arrow and gradient in background
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .awesome {<!--from w w w .j a v a2s .c om--> width: 50px; height: 50px; display: inline-block; text-align: center; font-weight: bold; font-size: 40px; color: white; text-shadow: 1px 1px 3px #fbb; /* FF3.5+, Opera 9+, Saf1+, Chrome, IE10 */ background-color: black; background-image: -webkit-gradient(linear, left top, left bottom, from(black), to(red)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(top, black, red); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(top, black, red); /* FF3.6 */ background-image: -ms-linear-gradient(top, black, red); /* IE10 */ background-image: -o-linear-gradient(top, black, red); /* Opera 11.10+ */ background-image: linear-gradient(top, black, red); -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } </style> </head> <body> <span class="awesome">></span> </body> </html>