JSFiddle - React, Tailwind, and code Playground

HTML

<p>
  The quick brown fox jumps over the lazy dog.<br>
  いろはにほへと ちりぬるを わかよたれそ つねならむ うゐのおくやま けふこえて あさきゆめみし ゑひもせす<br>
</p>

CSS

body {
  max-width: 24em;
}
p {
  --arrow-bg-color: #aaa;
  --arrow-color: #ff5;
  --arrow-angle: 120deg;
  --arrow-from-angle: calc(180deg + var(--arrow-angle) / 2);
  --arrow-outer-angle: calc(360deg - var(--arrow-angle));
  --arrow-margin-left: 1em;
  --arrow-width: 2em;
  --arrow-center: calc(var(--arrow-width) / 2);
  --arrow-offset: 1em;
  margin: 0;
  padding: 1em;
  border: solid transparent;
  border-width: 0 0 0 calc(var(--arrow-margin-left) + var(--arrow-width));
  border-radius: 0.5em;
  background: #ddd no-repeat border-box var(--arrow-margin-left) 0 / var(--arrow-width) 100%;
  background-image:
    conic-gradient(from var(--arrow-from-angle) at var(--arrow-center) calc(1 * var(--arrow-offset)), var(--arrow-bg-color) var(--arrow-outer-angle), transparent var(--arrow-outer-angle)),
    conic-gradient(from var(--arrow-from-angle) at var(--arrow-center) calc(2 * var(--arrow-offset)), var(--arrow-color) var(--arrow-outer-angle), transparent var(--arrow-outer-angle)),
    conic-gradient(from var(--arrow-from-angle) at var(--arrow-center) calc(3 * var(--arrow-offset)), var(--arrow-bg-color) var(--arrow-outer-angle), transparent var(--arrow-outer-angle)),
    conic-gradient(from var(--arrow-from-angle) at var(--arrow-center) calc(4 * var(--arrow-offset)), var(--arrow-color) var(--arrow-outer-angle), var(--arrow-bg-color) var(--arrow-outer-angle));
}