HTML CSS examples for CSS Widget:Menu
Creating menu with skewed blocks and diamond in the center
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> * {<!--from w ww . j a v a 2s.c o m--> box-sizing:border-box; } .offer-boxes { position:relative; } .offer-boxes:after { display:table; content:""; clear:both; } .offer-box-title { position:absolute; top:51%; left:51%; height:91px; width:121px; margin-left:-61px; margin-top:-46px; background:Chartreuse; text-align:center; z-index:2; } .offer-button { float:left; width:51%; height:251px; background:url('https://www.java2s.com/style/demo/Google-Chrome.png') no-repeat; background-size:cover; position:relative; text-align:center; } .offer-button h3 { max-width:91%; display:inline-block; vertical-align:middle; text-transform:uppercase; } .offer-button:after { content:""; width:2px; height:100%; display:inline-block; vertical-align:middle; } .offer-button:before { content:""; width:0; height:0; border-style:solid; position:absolute; } .offer-1:before { border-width:0 0 201px 100px; border-color:yellow; bottom:0; right:0; } .offer-2:before { border-width:201px 0 0 100px; border-color:blue; bottom:0; left:0; } .offer-3:before { border-width:0 100px 201px 0; border-color:pink; top:0; right:0; } .offer-4:before { border-width:201px 100px 0 0; border-color:OrangeRed; top:0; left:0; } </style> </head> <body> <div class="offer-boxes"> <div class="offer-box-title"> <h2>Lorem <strong>Lore</strong> </h2> </div> <a href="#" class="offer-button offer-1 left"> <h3>Lorem ips</h3> </a> <a href="#" class="offer-button offer-2 right"> <h3>Lorem ipsum d</h3> </a> <a href="#" class="offer-button offer-3 right"> <h3>Lorem ipsum dol</h3> </a> <a href="#" class="offer-button offer-4 left"> <h3>Lorem ipsu</h3> </a> </div> </body> </html>