JSFiddle - React, Tailwind, and code Playground

by atomr

HTML

<div class="pyramid">
					<ul class="first">
						<li class="first-link">
							<a href="#">
								<span>Умная страна</span>
							</a>
							<ul class="second">
								<li class="second-link">
									<a href="#">
										<span>Развитие</span>
									</a>
									<ul class="third">
										<li><a href="#"><span>Уровень шума</span></a></li>
										<li><a href="#"></a></li>
										<li><a href="#"></a></li>
										<li><a href="#"></a></li>
										<li><a href="#"></a></li>
										<li><a href="#"></a></li>
									</ul>
								</li>
								<li>
									<a href="#"><span>Взаимодействия</span></a>
								</li>
								<li>
									<a href="#"><span>Расширение</span></a>
								</li>
								<li>
									<a href="#"><span>Информация</span></a>
								</li>
								<li>
									<a href="#"><span>Контроль</span></a>
								</li>
								<li>
									<a href="#"><span>Экология</span></a>
								</li>
								<li>
									<a href="#"><span>Энергия</span></a>
								</li>
							</ul>
						</li>
						<li>
							<a href="#">
								<span>Умный город</span>
							</a>
						</li>
						<li>
							<a href="#">
								<span>Умное предприятие</span>
							</a>
						</li>
						<li>
							<a href="#">
								<span>Умный дом</span>
							</a>
						</li>
						<li>
							<a href="#">
								<span>Я</span>
							</a>
						</li>
					</ul>
				</div>

CSS

.pyramid .third {
	display: none;
	position: relative;
	z-index: 2;
	opacity: .44;
}

.pyramid {
	position: relative;
}

.pyramid ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.pyramid ul.first {
	width: 485px;
	-webkit-clip-path: polygon(100% 1%, 0 0, 50% 100%);
	clip-path: polygon(100% 1%, 0 0, 50% 100%);
	position: relative;
	z-index: 2;
}

.pyramid:after {
	content: '';
	display: block;
	display: none;
	z-index: 1;
	position: absolute;
	left: 55px;
	top: 247px;
	width: 372px;
	height: 392px;
	background-image: url(../img/pyramid-body.png);
	background-repeat: no-repeat;
	background-position: center center;
}

.pyramid ul.first li {
	background-color: rgba(246, 205, 178, 0.44);
	margin-bottom: 1px;
}

.pyramid ul.first li:hover {
	background-color: #f66401;
	opacity: 1;
}

.pyramid ul.first li:hover span {
	color: #fff;
	border-bottom: 1px dashed #fff;
}

.pyramid ul.first li a {
	font-size: 16px;
	text-decoration: none;
	width: 100%;
	display: block;
	padding: 16px 0;
}

.pyramid ul.first li:last-child a {
	padding-bottom: 65px;
}

.pyramid ul.first li a span {
	color: #423937;
	border-bottom: 1px dashed #423937;
}

.pyramid ul li {
	text-align: center;
}

.pyramid ul.second {
	width: 485px;
	position: absolute;
	-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}