HTML CSS examples for CSS Widget:Shape
CSS trapezoid shape clickable area
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> a {<!-- w w w .j av a2 s. c om--> display:block; z-index:2; position:relative; width:137px; height:86px; margin:100px auto; font:17px/51px Arial, sans-serif; text-transform:uppercase; text-align:center; background-color:Chartreuse; } a:before, a:after { content:''; position:absolute; top:0; left:0; width:100%; bottom:0; z-index:-2; border-radius:5px; background-color:yellow; } a:before { transform:skew(-21deg); left:26px; } a:after { transform:skew(21deg); right:26px; left:auto; } </style> </head> <body> <a href="http://www.google.com">Lorem ipsum</a> </body> </html>