JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<div class="icon">
  <div class="a">hello</div>
  <div class="b">hello</div>
</div>

CSS

* {
  box-sizing: border-box;
}

.icon, .icon .a, .icon .b {
  display: flex;
  justify-content: center;
        align-content: center;
}

.icon {
        font-size: 2em;
        background: black;
        color: white;
        width: 3em;
        height: 1.4em;
        display: flex;
        position: relative;

      }

      .icon .a,
      .icon .b {
        flex: 1 1 auto;
        padding: 0.15em;
        display: flex;
        justify-content: center;
        align-content: center;
      }

      .icon .b {
        background: white;
        color: black;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        clip-path: polygon(66% 0, 33% 100%, 100% 100%, 100% 0);
        box-shadow: inset 0 0 0 0.05em black;
      }