Como faço para criar migalhas de pão verticais em forma de triângulo
Pergunta
Estou tentando projetar uma trilha vertical.Não tenho certeza de como fazer os pequenos triângulos na parte inferior, espero poder fazer isso apenas com CSS e não usar imagens.Estou tentando obter os seguintes resultados:
Eles devem ser capazes de preencher com a cor branca, assim como o elemento ao passar o mouse.
Você pode ver meu progresso no violino: http://jsfiddle.net/5jJm3/2/
HTML:
<ul>
<li><div class="link"><p>Link1</p></div></li>
<li><div class="link"><p>Link2</p></div></li>
<li><div class="link"><p>Link3</p></div></li>
<li><div class="link"><p>Link4</p></div></li>
</ul>
CSS:
ul {
width: 100px;
height:500px;
border: 1px solid red;
margin: 0;
padding: 0;
text-align: center;
background: #1c818a;
}
ul li {
width: 100px;
height: 100px;
background: #64c7c7;
color: white;
list-style-type: none;
border-bottom: 3px solid white;
position: relative;
}
ul li:hover {
cursor: pointer;
background: white;
color: #64c7c7;
}
.link {
width:100px;
height:100px;
position:absolute;
left:50%;
top:50%;
margin:-25px 0 0 -50px;
}
Obrigado!
Solução
DEMONSTRAÇÃO: http://jsbin.com/zexoq/1
http://jsbin.com/zexoq/2/edit -- melhorar
Multilinha: http://jsbin.com/qebek/2/edit
<ol class="breadcrumbs">
<li><a href="#">title</a></li>
<li><a href="#">title</a></li>
<li><a href="#">title</a></li>
<li><a href="#">title</a></li>
</ol>
CSS
.breadcrumbs,
.breadcrumbs * {
box-sizing: border-box;
list-style: none;
margin: 0;
}
.breadcrumbs li { width: 100px }
.breadcrumbs a {
text-decoration: none;
display: block;
height: 100px;
width: 100%;
background: aqua;
text-align: center;
line-height: 105px;
position: relative;
overflow: visible;
}
.breadcrumbs li a { border-bottom: 2px solid #fff }
.breadcrumbs li:last-child { border-bottom: 10px solid blue }
.breadcrumbs li:not(:last-child) a:after {
content: '';
width: 0;
height: 0;
position: absolute;
z-index: 2;
bottom: -10px;
left: 50%;
margin-left: -10px;
border-style: solid;
border-width: 10px 10px 0 10px;
border-color: aqua transparent transparent transparent;
}
.breadcrumbs li:not(:last-child) a:before {
content: '';
width: 0;
height: 0;
position: absolute;
z-index: 1;
bottom: -13px;
left: 50%;
margin-left: -12px;
border-style: solid;
border-width: 12px 12px 0 12px;
border-color: #fff transparent transparent transparent;
}
.breadcrumbs li:hover a {
background:#fff;
}
.breadcrumbs li:hover a:after {
border-top-color:#fff;
}
Outras dicas
Você pode usar :before e :after para criar o triângulo com bordas.
Verifique meu código:
ul{
text-align: center;
background: #1c818a;
width:200px;
padding:0;
margin:0;
height:900px;
}
li{
list-style-type: none; margin:0; margin-bottom:-2px;
}
p{margin-top:50px; color:white; font-size:20px;}
.arrow_box {
position: relative;
background: #66c7c5;
border: 2px solid #FFF;
border-left:0;
width:200px;
height:200px;
}
.arrow_box:hover {
background: #FFF;
}
.arrow_box:hover > p{
color: #66c7c5;
}
.normal_box {
position: relative;
background: #66c7c5;
border: 2px solid #FFF;
border-left:0;
width:200px;
height:200px;
}
.normal_box:hover {
background: #FFF;
}
.normal_box:hover > p{
color: #66c7c5;
}
.arrow_box:hover:after{
border-color: rgba(255, 255, 255, 0);
border-top-color: #FFF;
}
.arrow_box:after, .arrow_box:before {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(102, 199, 197, 0);
border-top-color: #66c7c5;
border-width: 30px;
margin-left: -30px;
}
.arrow_box:before {
border-color: rgba(255, 255, 255, 0);
border-top-color: #FFF;
border-width: 33px;
margin-left: -33px;
}
.arrow_box:nth-of-type(1):before,.arrow_box:nth-of-type(1):after{z-index:4;}
.arrow_box:nth-of-type(2):before,.arrow_box:nth-of-type(2):after{z-index:3;}
.arrow_box:nth-of-type(3):before,.arrow_box:nth-of-type(3):after{z-index:2;}
DEMONSTRAÇÃO: http://jsfiddle.net/4n9hq/
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow