JSFiddle - React, Tailwind, and code Playground

by Ting-Yuan Chang

HTML

<div id="flag">12345</div>

CSS

#flag {
      width: 110px;
      height: 56px;
      box-sizing: content-box;
      padding-top: 15px;
      position: relative;
      background: linear-gradient(to bottom, red 58px, transparent 58px);
      color: white;
      font-size: 11px;
      letter-spacing: 0.2em;
      text-align: center;
      text-transform: uppercase;
    }
    #flag::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 0;
      height: 0;
      border-bottom: 13px solid transparent;
      border-left: 55px solid red;
      border-right: 55px solid red;
      border-radius: 0px 0px 10px 10px;
    }