JSFiddle - React, Tailwind, and code Playground

by satantx

HTML

<section class="bredcrumb_cart">
        	<ul>
                <li><div class="active"><span>1</span> Состав корзины</div></li>
                <li><div><span>2</span> Контактные данные</div></li>
                <li><div><span>3</span> Способ оплаты</div></li>
            </ul>
        </section>

CSS

/* Путь по корзине */

.bredcrumb_cart{
	color:#b7b7b7;
	font-size:18px;
}
.bredcrumb_cart ul{
	overflow:hidden;
	padding:0;
}
.bredcrumb_cart li{
	float:left;
	width:33.33%;
	list-style:none;
}
.bredcrumb_cart div{
	position:relative;
	height:43px;
	line-height:43px;
	border:1px solid #b7b7b7;
	border-left:0;
	background:#d5d5d3;
	padding:0 6px 0 0;
}
.bredcrumb_cart div:after,
.bredcrumb_cart div:before {
	content: "";
	position: absolute;
	width:0;
	height:0;
	border-top: 6px solid transparent;
    border-left: 6px solid #B7B7B7;
    border-bottom: 6px solid transparent;
	left: 100%;
	top: 50%;
	margin-top:-6px;
	z-index:1;
}

.bredcrumb_cart div:before {
    border-left: 6px solid #D5D5D3;
    z-index: 2;
    margin-left: -2px;
}

.bredcrumb_cart li:last-child div:after{
	display:none;
}
.bredcrumb_cart div.active:after{
	content: "";
	position: absolute;
	width:0;
	height:0;
	border-top: 6px solid transparent;
    border-left: 6px solid #c23114;
    border-bottom: 6px solid transparent;
	right: -6px;
	top: 50%;
	margin-top:-6px;
}

.bredcrumb_cart div.active:before {
    display: none;
}

.bredcrumb_cart div.active{
	background:#c23114;
	color:#fff;
	border-color:#c23114;
}
.bredcrumb_cart span{
	display:inline-block;
	font-size:17px;
	font-weight:bold;
	color:#fff;
	background:#b7b7b7;
	width:22px;
	height:22px;
	line-height:22px;
	border-radius:50%;
	text-align:center;
	margin:0 0 0 10px;
}
.bredcrumb_cart div.active span{
	color:#c23114;
	background:#fff;
}
/*=================*/