HTML CSS examples for CSS Widget:Border Style
Create Diagonal Border Line
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> * {<!-- w w w .j av a 2 s. co m--> margin: 0; padding: 0; } body { padding: 20px 60px; } .btn{ width: 300px; height: 100px; display: inline-block; position: relative; border: 4px solid #e74c3c; color: #e74c3c; text-transform: uppercase; text-align: center; text-decoration: none; } .btn > span:before { content: ''; position: absolute; bottom: 12px; right: 9px; width: 66px; height: 66px; transform: rotate(45deg); z-index: 1; border-right: 4px solid #e74c3c; } .btn:before, .btn:after{ content: ''; position: absolute; bottom: -4px; right: -4px; } .btn:before{ width: 47px; height: 0; border-bottom: 4px solid #fff; } .btn:after{ width: 0; height: 47px; border-right: 4px solid #fff; } .btn:hover{ border: 4px solid #4169E1; color: #4169E1; } .btn:hover > span:before{ border-right: 4px solid #4169E1; } </style> </head> <body> <a href="#" class="btn"> <span>test</span> </a> </body> </html>