.wp-block-message_example {
  color: #fff;
  text-align: left;
  max-width: 85%;
  padding: 1em;
  border-radius: var(--r) var(--r) min(var(--r), 100% - var(--p) - var(--b) / 4) min(var(--r), var(--p) - var(--b) / 4)/var(--r);
  background: #6C63FF; /* the main color */
  position: relative;
}

.wp-block-message_example .sender {
  margin: 0;
}

.wp-block-message_example .content {
  margin-top: 10px;
}

.wp-block-message_example .content p {
  margin: 0;
}

.wp-block-message_example.left {
  --b: 1.5em;
  --p: 8%;
  --r: 10px;
}

.wp-block-message_example.right {
  --b: 1.5em;
  --p: 92%;
  --r: 10px;
  margin-left: auto;
}

.wp-block-message_example:before {
  content: "";
  position: absolute;
  top: 100%;
  left: clamp(var(--b) / -2, var(--p) - 3 * var(--b) / 4, 100% - var(--b));
  width: var(--b);
  aspect-ratio: 1;
  background: inherit;
  --g:#000 calc(100% - 1px),#0000;
  -webkit-mask: radial-gradient(circle closest-side at 12% 88%, var(--g)), radial-gradient(20% 20% at 52% 55%, var(--g)), radial-gradient(25% 25% at 75% 0, var(--g));
          mask: radial-gradient(circle closest-side at 12% 88%, var(--g)), radial-gradient(20% 20% at 52% 55%, var(--g)), radial-gradient(25% 25% at 75% 0, var(--g));
}

.wp-block-message_example.right:before {
  -webkit-mask: radial-gradient(circle closest-side at 88% 88%, var(--g)), radial-gradient(20% 20% at 48% 55%, var(--g)), radial-gradient(25% 25% at 25% 0, var(--g));
          mask: radial-gradient(circle closest-side at 88% 88%, var(--g)), radial-gradient(20% 20% at 48% 55%, var(--g)), radial-gradient(25% 25% at 25% 0, var(--g));
}