JSFiddle - React, Tailwind, and code Playground

by yanlylau

HTML

<div>
  <div class="heading">訂單紀錄</div>
  <div>
    <div class="cat_label">團購訂單</div>
  </div>
  <div class="status_label">等待確認中</div>
</div>

CSS

.heading{
  position:absolute
}

.cat_label{
  position:absolute;
  left: 100px;
  padding:0 10px;
  display:block;
  line-height:30px;
  text-align:center;
  color:#FFF;
  font-weight:bold;
  font-family:Heiti TC;
  background-color:#D9605A;
}

.cat_label:after{
  content:"";
  position:absolute;
  bottom:0px;
  right:-15px;
  display:block;
  width:0;
  height:0;
  border-left:15px solid #D9605A;
  border-bottom:30px solid transparent
}




.status_label{
  position:absolute;
  left: 210px;
  padding-left:10px;
  display:block;
  line-height:30px;
  text-align:center;
  color:#D9605A;
  font-weight:bold;
  font-family:Heiti TC;
  border-color:#D9605A;
  border-left:1px solid #D9605A;
  border-top:1px solid #D9605A;
  border-bottom:1px solid #D9605A;
}


.status_label:after{
    content: '';
    width: 40%;
    top: -1px;
    left: 70px;
    height: 100%;
    position: absolute; 
    border-right:1px solid #D9605A;
    border-top:1px solid #D9605A;
    border-bottom:1px solid #D9605A;
    transform: skewX(-30deg);
}