JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<div class="tooltip">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores fugit delectus magnam assumenda tenetur impedit rerum cupiditate error. Illo, placeat.
</div>

CSS

/* HTML: <div class="tooltip">This is a Tooltip with a border and with a border radius. Border and background have a solid coloration</div> */
.tooltip {
  color: #fff;
  font-size: 18px;
  max-width: 28ch;
  text-align: center;
}
.tooltip {
  /* triangle dimension */
  --a: 90deg; /* angle */
  --h: 1em;   /* height */

  --p: 50%;  /* triangle position (0%:left 100%:right) */
  --r: 1.2em; /* the radius */
  --b: 5px; /* border width  */
  --c1: #0D6759;
  --c2: #cf9d38;

  padding: 1em;
  border-radius: var(--r)/var(--r) min(var(--r),var(--p) - var(--h)*tan(var(--a)/2)) min(var(--r),100% - var(--p) - var(--h)*tan(var(--a)/2)) var(--r);
  clip-path: polygon(100% 0,0 0,0 100%,100% 100%,
    100% min(100%,var(--p) + var(--h)*tan(var(--a)/2)),
    calc(100% + var(--h)) var(--p),
    100% max(0%  ,var(--p) - var(--h)*tan(var(--a)/2)));
  background: var(--c1);
  border-image: conic-gradient(var(--c1) 0 0) fill 0/
    max(0%,var(--p) - var(--h)*tan(var(--a)/2)) 0 max(0%,100% - var(--p) - var(--h)*tan(var(--a)/2)) var(--r)/0 var(--h) 0 0;
  position: relative;
}
.tooltip:before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  padding: var(--b);
  border-radius: inherit;
  clip-path: polygon(100% 0,0 0,0 100%,100% 100%,
    calc(100% - var(--b)) min(100% - var(--b),var(--p) + var(--h)*tan(var(--a)/2) - var(--b)*tan(45deg - var(--a)/4)),
    calc(100% + var(--h) - var(--b)/sin(var(--a)/2)) var(--p),
    calc(100% - var(--b)) max(       var(--b),var(--p) - var(--h)*tan(var(--a)/2) + var(--b)*tan(45deg - var(--a)/4)));
  background: var(--c2) content-box;
  border-image: conic-gradient(var(--c2) 0 0) fill 0/
    max(var(--b),var(--p) - var(--h)*tan(var(--a)/2)) 0 max(var(--b),100% - var(--p) - var(--h)*tan(var(--a)/2)) var(--r)/0 var(--h) 0 0;
}