Как создать треугольные вертикальные панировочные сухари

Я пытаюсь создать вертикальную панировку. Я не уверен, как сделать маленькие треугольники внизу, я надеюсь, что смогу сделать это только с помощью css и не использовать изображения. Я смотрю на получение следующих результатов:

Они должны иметь возможность заливать белый цвет так же, как элемент при наведении.

Вы можете увидеть мой прогресс на скрипке: http://jsfiddle.net/5jJm3/2/

HTML:

<ul>
 <li><div><p>Link1</p></div></li>
 <li><div><p>Link2</p></div></li>
 <li><div><p>Link3</p></div></li>
 <li><div><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; 
}

Благодарю!

2 ответа

ДЕМО: http://jsbin.com/zexoq/1

http://jsbin.com/zexoq/2/edit - лучше

Многострочный: http://jsbin.com/qebek/2/edit

<ol>
 <li><a href="#" target="_blank">title</a></li>
 <li><a href="#" target="_blank">title</a></li>
 <li><a href="#" target="_blank">title</a></li>
 <li><a href="#" target="_blank">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;
}


Вы можете использовать: before и: after для создания треугольника с границами.

Проверьте мой код:

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/

licensed under cc by-sa 3.0 with attribution.