JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer">
  <div class="inner">
    <div class="container">
      <div class="note note-C">
        <span class="note-text">C</span>
      </div>
      <div class="note note-E">
        <span class="note-text">E</span>
      </div>
      <div class="note note-G">
        <span class="note-text">G</span>
      </div>
    </div>
  </div>
</div>
<svg style="height: 0; width: 0;">
    <defs>
        <clipPath id="triangle-clip-path" clipPathUnits="objectBoundingBox">
           <!-- <path d="M100,21q0,-21,-18.783,-11.609l-62.434,31.218q-18.783,9.391,0,18.782l62.434,31.218q18.783,9.391,18.783,-11.609z" /> -->
           <!-- works -->
            <polygon points="0 0.87, 0.5 0, 0.5 0, 1 0.87" clipPathUnits="objectBoundingBox"/>
        </clipPath>
        <clipPath id="triangle-rounded-clip" clipPathUnits="objectBoundingBox">
           <path d="m 33.334696,31.646744 c -0.0026,0.0047 -0.261859,0.0047 -0.264504,0 -0.0026,-0.0047 0.126962,-0.234607 0.132252,-0.234607 0.0053,0 0.134897,0.229914 0.132252,0.234607 z" />
       </clipPath>
        <clipPath id="triangle-rounded-2-clip" clipPathUnits="objectBoundingBox">
            <!-- doesn't work -->
           <path d="M100,21q0,-21,-18.783,-11.609l-62.434,31.218q-18.783,9.391,0,18.782l62.434,31.218q18.783,9.391,18.783,-11.609z" />
       </clipPath>
    </defs>
</svg>

CSS

div.outer {
  background-color: red;
  width: 30vw;
  height: 50vh;
}

div.inner {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: relative;
}

div.container {
  color: #000;
  font-weight: bold;
  display: flex;
  justify-content: space-around;
  font-family: sans-serif;
  font-size: 3em;
  align-items: center;
  justify-content: space-around;
  width: min(100%, 10em);
  height: min(10rem, 100%);
}

div.note {
  text-align: center;
  background-color: #ddd;
  width: 1.5em;
  height: 1.5em;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  
}

div.note:nth-child(1) {
    align-self: flex-end;
}

div.note:nth-child(2) {
    align-self: center;
}

div.note:nth-child(3) {
    align-self: flex-start;
}

div.note.note-G {
  clip-path: url("#triangle-clip-path");
}

div.note.note-G span.note-text {
  transform: translateY(10%);
}

div.note.note-E {
  clip-path: url("#triangle-rounded-clip");
}

div.note.note-C {
  clip-path: url("#triangle-rounded-2-clip");
}