HTML CSS examples for CSS Widget:Shape
Create anchor link with borders and triangle click area
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <style id="compiled-css" type="text/css"> .tile-content {<!--from w ww. java2s.com--> width: 190px; height: 90px; position: absolute; z-index: 1; background-color: blue; margin: 5px 0 0 5px; } .action-button { width: 200px; height: 100px; display: block; border-color: rgb(0, 0, 255); border-color: rgba(0, 0, 255, 0.5); border-style: solid; border-width: 5px; position: relative; box-sizing: border-box; } .action-button .triangle .action-tick { margin-left: -25px; margin-top: 25px; font: normal normal normal 25px/1 FontAwesome; color: white; } .action-button .triangle .action-tick:before { content:"\f00c"; } .action-button .triangle { position: absolute; right: 0; bottom: 0; width: 0; height: 0; border-style: solid; border-width: 0 0 50px 50px; border-color: transparent transparent #ffffff transparent; border-color: transparent transparent rgba(255, 255, 255, 0.5) transparent; z-index:2; } </style> </head> <body> <div class="tile"> <div class="tile-content"></div> <a class="action-button" href="#"> <div class="triangle"> <div class="action-tick"> </div> </div> </a> </div> </body> </html>