삼각형 모양의 수직 빵 부스러기를 어떻게 만듭니다

Question

나는 수직 탐험죄를 디자인하려고 노력하고 있습니다.나는 하단에 작은 삼각형을하는 법을 잘 모르겠지만, 나는 CSS 만으로이 일을 할 수 있고 이미지를 사용하지 않을 것이기를 바랍니다.나는 다음과 같은 결과를 얻는 것을보고 있습니다.

호버의 요소와 마찬가지로 흰색 색상으로 채울 수 있어야합니다.

바이올린에서 진행 상황을 볼 수 있습니다 : 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; 
}

.

감사합니다!

Answer 1

데모 : http://jsbin.com/zexoq/1

http://jsbin.com/zexoq/2/edit - 더 나은

멀티 라인 : 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

다음을 사용할 수 있습니다 : 이전 및 : 테두리가있는 삼각형을 생성 한 후.

내 코드 확인 :

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

.

데모 : http://jsfiddle.net/4n9hq/