html - How do I create triangle shaped vertical breadcrumbs -
I am trying to design a vertical breadcrumb. I'm not sure how to do the small triangle below, I hope I can do it with CSS and can not use images. I am considering the following results:
should be enabled Fill the hover with the same color as the element.
You can see my progress on Bella:
HTML:
& lt; Ul & gt; & Lt; Li & gt; & Lt; Div class = "link" & gt; & Lt; P & gt; Link 1 & lt; / P & gt; & Lt; / Div & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; Div class = "link" & gt; & Lt; P & gt; Link 2 & lt; / P & gt; & Lt; / Div & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; Div class = "link" & gt; & Lt; P & gt; Link 3 & lt; / P & gt; & Lt; / Div & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; Div class = "link" & gt; & Lt; P & gt; Link 4 & lt; / P & gt; & Lt; / Div & gt; & Lt; / Li & gt; & Lt; / Ul & gt;
CSS:
ul {width: 100px; Height: 500px; Border: 1px solid red; Margin: 0; Padding: 0; Text align: center; Background: # 1c818a; } Ul li {width: 100px; Height: 100 pixels; Background: # 64c7c7; White color; List-style-type: none; Border bottom: 3px solid white; Status: Relative; } ULL: Hover (cursor: indicator; Background: white; Color: # 64c7c7; } .link {width: 100px; Height: 100px; Status: Completed; Left: 50%; Top: 50%; Margin: -25px 0 -50px; }
Thanks!
Demo:
- Better
Multi-line:
& lt; Ol class = "breadcrumbs" & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Title & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Title & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Title & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Title & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ol & gt;
css
. Breadcrumb, .bredcrambs * {box-size: border-box; List style: none; Margin: 0; } .breadcrumbs li {width: 100px}. Breadcrumbs a {text-decoration: none; Display area; Height: 100 pixels; Width: 100%; Background: Aqua; Text align: center; Line-height: 105px; Status: Relative; Overflow: visible; }. Breadcrime Li is a {border-down: 2px solid #ff} .bredcams li: last-child (border-bottom: 10px solid blue) .bredcams li: no (: last-child) a: after {content:; Width: 0; Height: 0; Status: Completed; Z-index: 2; Bottom: -10 pixels; Left: 50%; Margin-left: -10 pixel; Border-style: solid; Threshold width: 10px 10px 0 10px; Border Color: AQUA Transparent Transparent; } .bredcomas li: not (: last-child) a: {content: ''; Width: 0; Height: 0; Status: Completed; Z-index: 1; Bottom: -13px; Left: 50%; Margin-left: -12 pixels; Border-style: solid; Border width: 12px 12px 0 12px; Border color: #FF transparent transparent transparent; }. Breadcrumbs li: A {background: #fff; } .breadcreebs li: hover: {after border-top-color: #fff; }
Comments
Post a Comment