Comment créer une chapelure verticale en forme de triangle

Question

J'essaie de concevoir une chapelle verticale.Je ne sais pas comment faire les petits triangles sur le fond, j'espère que je peux le faire avec CSS uniquement et ne pas utiliser des images.Je cherche à obtenir les résultats suivants:

Ils devraient pouvoir remplir de couleur blanche comme l'élément sur la survolte.

Vous pouvez voir mes progrès sur violon: 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; 
}

merci!

Answer 1

Demo: http://jsbin.com/zexoq/1

http://jsbin.com/zexoq/2/edit - mieux

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;
}

Answer 2

Vous pouvez utiliser: avant et: après avoir créé le triangle avec des frontières.

vérifier mon code:

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;}

démo : http://jsfiddle.net/4n9hq/