HTML CSS examples for CSS Widget:Shape
Creating angled shape using CSS
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .arrow-wrap {<!--from ww w. j a v a2 s. co m--> width:126px; margin:auto; padding:100px 0; } .arrow-button { width:126px; height:51px; line-height:51px; position:relative; background:Chartreuse; text-align:center; text-decoration:none; color:yellow; display:block; color:blue; } .arrow-tip { display:block; width:102px; height:116px; margin:0; -webkit-transform:rotate(46deg) skew(-19deg,-24deg); } .arrow-tip-container { display:block; width:126px; height:41px; position:absolute; top:-41px; left:0px; overflow:hidden; } .arrow-tip-grad { display:block; width:100%; height:100%; background:red; } </style> </head> <body> <div class="arrow-wrap"> <a href="#" class="arrow-button">Lorem ipsum d<span class="arrow-tip-container"> <span class="arrow-tip"> <span class="arrow-tip-grad"></span> </span> </span> </a> </div> </body> </html>