タイトルの通りCSS3だけでスタイリングしたパンくずを作成してみました。
横幅が短いバージョン
横幅が長いバージョン
基本的には、一般的なul > liで作成したリストです。
ポイントとしては、各リストの区切りの「>」の部分です。これは、白い三角形とグレーの三角形の重ねで実現しています。
白い三角形は、「li > a」の「before要素」として、
グレーの三角形は、「li > a」の「after要素」として定義しています。
各リストの前後関係から、htmlタグ上では一番右に表示されるリスト(現在ページ)から逆順に記述しています。
.wrapper,
.wrapper > .bread-crumb {
overflow: hidden;
height: 40px;
background-color: #59698F !important;
}
.bread-crumb {
overflow: hidden;
display: inline-block;
height: 40px;
list-style: none;
background-color: #FFF;
margin: 0;
padding: 0 10px 0 0;
}
.bread-crumb > li {
float: right;
display: inline-block;
margin-right: -10px;
}
.bread-crumb > li > a {
display: block;
height: 40px;
line-height: 40px;
color: #59698F;
font-size: 14px;
background-color: #EEE;
text-decoration: none;
margin-right: 15px;
padding: 0 15px 0 25px;
}
.bread-crumb > li:last-child > a {
padding: 0 15px;
}
.bread-crumb > li > a > i {
line-height: 40px;
font-size: 1.5em;
}
.bread-crumb > li > a::before {
float: right;
content: "";
display: inline-block;
width: 0;
height: 0;
border-top: 28px solid transparent;
border-bottom: 28px solid transparent;
border-left: 14px solid #FFF;
margin: -8px -30px 0 0;
}
.bread-crumb > li > a::after {
float: right;
content: "";
display: inline-block;
width: 0;
height: 0;
border-top: 26px solid transparent;
border-bottom: 26px solid transparent;
border-left: 13px solid #EEE;
margin: -6px -27px 0 0;
}
.bread-crumb > li:first-child > a {
color: #FFF;
background-color: #59698F;
cursor: default;
}
.bread-crumb > li:first-child > a::after {
border-left-color: #59698F;
}
.wrapper > .bread-crumb > li:first-child > a::before,
.wrapper > .bread-crumb > li:first-child > a::after {
background-color: transparent !important;
border-color: transparent !important;
}
.bread-crumb > li:hover > a {
color: #FFF;
background-color: #59698F;
}
.bread-crumb > li:hover > a::after {
border-left-color: #59698F;
}