JSFiddle - React, Tailwind, and code Playground
HTML
<div class="crumbs"><a title="docs" class="wikilink1" href="/docs">Главная</a> <span class="curid"><a title="requirements" class="wikilink1" href="/requirements">Системные требования</a></span> </div>
CSS
.crumbs {
/*margin-left: -5px;*/
/*margin-right: -5px;*/
border-bottom: 2px solid #BAD0DE;
border-left: none;
border-right: none;
overflow: hidden;
padding-bottom: 10px;
margin-bottom: 5px;
}
.crumbs a {
display: block;
/*border-radius: 2px;*/
background: #31607D;
color: #fff;
text-decoration: none;
padding: 4px 7px;
position: relative;
padding-left: 27px;
padding-right: 12px;
float: left;
/*font-family: "PT Sans";*/
font-family: Tahoma;
font-size: 15px;
height: 24px;
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
border: none;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
-moz-border-radius-bottomright: 0;
-moz-border-radius-topright: 0;
-webkit-border-bottom-right-radius: 0;
-webkit-border-top-right-radius: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
margin-bottom: 5px;
}
.crumbs a::after {
content: '';
border-top: 16px solid transparent;
border-left: 15px solid #31607D;
border-bottom: 16px solid transparent;
border-right: none;
position: absolute;
right: -15px;
top: 0;
height: 0;
z-index: 2;
}
.crumbs a::before {
content: '';
border-top: 16px solid transparent;
border-left: 15px solid #fff;
border-bottom: 16px solid transparent;
border-right: none;
position: absolute;
right: -16px;
top: 0;
height: 0;
z-index: 1;
}
.crumbs a:hover {
/*color: #DEE7EC;*/
background: #2D5066;
}
.crumbs a:hover::after {
border-left-color: #2D5066;
}
.crumbs .bchead+a, .crumbs .bchead+.curid a {
padding-left: 10px;
}
.crumbs .curid a {
background: #DEE7EC;
color: #31607D;
}
.crumbs .curid a::after {
border-left-color: #DEE7EC;
}
.crumbs .curid a:hover {
background: #B8CFDB;
}
.crumbs .curid a:hover::after...