<ul class="example">
	<li class="ac"><a href="">タブテキスト</a></li>
	<li><a href="">タブテキスト</a></li>
</ul>
* {
	box-sizing: border-box;
}
body {
	min-height: 100vh;
	background-color: #dce4ec;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	align-items: center;
}
li {
	list-style-type: none;
}
a {
	color: #2b546a;
	display: block;
	text-decoration: none;
}

.example {
	display: flex;
}
.example li:not(:first-of-type) {
	position: relative;
	left: -5px;
}
.example li a {
	line-height: 30px;
	height: 0;
	padding: 0 15px;
	border-bottom: 30px solid #bacfda;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
}
.example li.ac {
	z-index: 2;
}
.example li.ac a {
	border-bottom-color: #f9fbfe;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.