Я делаю меню хлебных крошек и пытаюсь сделать это на чистом CSS, поэтому мне не нужно использовать фоновое изображение, чтобы получить форму стрелки. Можно ли добиться этого стиля угловой границы с помощью чистого CSS?
Лучшее, что мне удалось сделать, выглядит так (это всего лишь черновик снимка экрана, который я сделал некоторое время назад, поэтому, пожалуйста, не обращайте внимания на то, что панировочные сухари — это фрукты и/или вкусные):
Я добивался этого с помощью CSS следующим образом:
.breadcrumb li {
border-right: 2px solid #ECECEC;
border-top-right-radius: 40px;
border-bottom-right-radius: 40px;
}
Вот весь CSS, если поможет:
div.breadcrumb {
display: block;
float: left;
border-bottom: 2px solid gray;
}
ul.breadcrumb {
display: block;
float: left;
list-style-type: none;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
.breadcrumb li {
float: left;
display: list-item;
background-color: #F2F2F2;
border-right: 2px solid #ECECEC;
border-top-right-radius: 40px;
border-bottom-right-radius: 40px;
position: relative;
padding: 9px 20px 10px 35px;
margin-left: -32px;
}
.breadcrumb li.first-crumb {
background: #E7E7E7;
padding-left: 20px;
margin-left: 0px;
}
.breadcrumb li.last-crumb {
border-top: 1px solid #E3E3E3;
border-right: 1px solid #E3E3E3;
background: white;
padding-top: 9px;
padding-bottom: 9px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
}
.breadcrumb li:not(.first-crumb) {
padding-left: 45px;
}
.breadcrumb li:not(.last-crumb) a:after {
content: "\27F6";
margin-left: 10px;
color: #444444;
margin-right: 0px;
}
.breadcrumb li a,
.breadcrumb li span {
display: block;
float: left;
position: relative;
}
.breadcrumb li a {
text-decoration: none;
}
.breadcrumb li.first-crumb a {
padding-left: 0px;
margin-left: 0px;
}
Моя разметка выглядит так:
<div class="breadcrumb">
<ul class="breadcrumb">
<li class="breadcrumb first-crumb"><a href="#">Produce</a></li>
<li class="breadcrumb"><a href="#">Fruits</a></li>
<li class="breadcrumb last-crumb"><span>breadcrumb-ilicious!</span></li>
</ul>
</div>
Редактировать: Было бы неплохо, если бы я мог сделать так, чтобы это выглядело так, как будто есть настоящая граница. Это мой грубый набросок:
(Я попытался добавить несколько треугольников по предложению Олафа, и единственное, что я не мог сделать, это исправить очевидный разрыв между двумя треугольниками, не изменяя угол треугольника, выступающего, чтобы сформировать границу.)