<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:calc(84px / 2);
  height: calc(47px / 2);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 84 47"><path fill="%23f1c201" d="M42,0,84,47H0Z" transform="translate(84 47) rotate(180)" /></svg>');
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.