<ul class="example">
	<li>STEP.01</li>
	<li>STEP.02</li>
	<li>STEP.03</li>
	<li>STEP.04</li>
</ul>

* {
	box-sizing: border-box;
}
ul {
  width: 40%;
}
li {
	list-style-type: none;
}


.example li {
	width: 100%;
	padding: 20px;
	border: 2px solid #333;
	text-align: center;
	position: relative;
}
.example li:not(:last-child) {
	margin-bottom: 40px;
}
.example li:not(:last-child)::before,
.example li:not(:last-child)::after {
	content: "";
	border: solid transparent;
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1;
}
.example li:not(:last-child)::before {
	border-width: 22px;
	border-top-color: #333;
}
.example li:not(:last-child)::after {
	border-width: 20px;
	border-top-color: #fff;
}