JSFiddle - React, Tailwind, and code Playground

by ZeNz0r

HTML

<div class="wrap">
    <div class="circle">
      <span>Faro Airport</span>><span>Albufeira</span>
    </div
</div>

CSS

.wrap {
    width: 500px;
    height: 200px;
    background-color: #000;
    padding:20px;
}

.circle span:nth-of-type(1) {
  width: 120px;
  height: 40px;
  background: #F6C431;
  content: "";
  display: block;
  position: absolute;
  left: 30px;
  line-height: 40px;
  padding-left: 15px;
}

/*246	196	49*/

.circle span:nth-of-type(1):after {
  content: "";
  display: block;
  position: absolute;
  height: 0;
  width: 0;
  bottom: 0px;
  left: 135px;
  border: 20px solid rgba(255,255,255,0);
  border-top: 20px solid rgba(255,255,255,0);
  border-left: 20px solid rgba(246,196,49,1);
  border-bottom: 20px solid rgba(255,255,255,0);
}


.circle span:nth-of-type(2) {
  width: 120px;
  height: 40px;
  background: #F6C431;
  content: "";
  display: inline;
  position: absolute;
  left: 220px;
  line-height: 40px;
  padding-left: 15px;
}


.circle span:nth-of-type(2):after {
  content: "";
  display: inline;
  position: absolute;
  height: 0;
  width: 0;
  top: 0;
  left: -40px;
  border-left: 20px solid rgba(255,255,255,0);
  border-top: 20px solid rgba(246,196,49,1);
  border-bottom: 20px solid rgba(246,196,49,1);
  border-right: 20px solid rgba(246,196,49,1);
}