HTML CSS examples for CSS Widget:Menu
Breadcrum menu
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .panel_top { position:relative; width:100%; height:51px; background:linear-gradient(to bottom, Chartreuse 0%, rgba(223, 224, 225, 2) 100%); } .folder_path {<!-- w w w. jav a2s . co m--> display:inline-block; height:51px; width:calc(100% - 243px); text-align:left; } .folder_path .path_part { position:relative; display:inline-block; height:51px; line-height:51px; vertical-align:middle; min-width:41px; font-size:21px; padding:0 11px; z-index:3; } .folder_path .right_arrow { position:relative; z-index:2; display:inline-block; vertical-align:middle; height:36px; width:36px; content:""; -webkit-transform:rotate(-46deg); transform:rotate(-46deg); border:2px solid yellow; -webkit-mask-image:-webkit-gradient(linear, left top, right bottom, from(transparent), color-stop(0.6, transparent), color-stop(0.6, blue), to(pink)); margin-left:-26px; } .folder_path .path_part:hover { background:OrangeRed; cursor:pointer; } </style> </head> <body> <div class="panel_top"> <div class="folder_path"> <div class="path_part"> Lorem ipsu </div> <div class="right_arrow"></div> <div class="path_part"> Lorem </div> <div class="right_arrow"></div> </div> </div> </body> </html>