<ul class="flow">
<li class="flow_item"><span>STEP1</span>流れ1のテキスト</li>
<li class="flow_item"><span>STEP2</span>流れ2のテキスト</li>
<li class="flow_item"><span>STEP3</span>流れ3のテキスト</li>
</ul>
ul li{
list-style:none;
}
.flow{
max-width:400px;
}
.flow_item{
margin-bottom:2em;
padding:1em;
background:#ebebeb;
position:relative;
}
.flow_item span{
margin-right:1em;
font-weight:bold;
}
.flow_item:not(:last-of-type)::after{
content:"";
display:block;
position: absolute;
top: 100%;
left: calc(50% - 20px);
width: 0;
height: 0;
border-style: solid;
border-width: 20px;
border-color: #f2c200 transparent transparent transparent;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.