¿Cómo creo los pan de pan verticales en forma de triángulo?
Pregunta
Estoy tratando de diseñar una panorita vertical.No estoy seguro de cómo hacer los pequeños triángulos en la parte inferior, estoy esperando que pueda hacerlo con CSS solamente y no usar imágenes.Estoy viendo obtener los siguientes resultados:
Deben poder llenarse con el color blanco al igual que el elemento en el flujo.
Puedes ver mi progreso en el violín: 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;
}
¡Gracias!
Solución
Demo: http://jsbin.com/zexoq/1
http://jsbin.com/zexoq/2/edit - mejor
Multi-line: 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;
}
Otros consejos
Puede usar: antes y: después de crear el triángulo con bordes.
Revisa mi 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;}
Demo : http://jsfiddle.net/4n9hq/
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow