<div class="tooltip bottom">
  Chocolate shortbread gummi bears cupcake chupa chups. Jelly-o halvah gummi bears bonbon cookie cheesecake
</div>
<div class="tooltip top" style="--p: 20%;--w:60px;--h: 30px">
  Chocolate shortbread gummi bears cupcake chupa chups. Jelly-o halvah gummi bears bonbon cookie cheesecake
</div>
<div class="tooltip left" style="--p: 80%;--w:20px;--h: 30px">
  Chocolate shortbread gummi bears cupcake chupa chups. Jelly-o halvah gummi bears bonbon cookie cheesecake
</div>
<div class="tooltip right" style="--p: 20%;--w:30px;--h: 40px">
  Chocolate shortbread gummi bears cupcake chupa chups. Jelly-o halvah gummi bears bonbon cookie cheesecake
</div>
.tooltip {
  --h: 20px;
  --w: 40px;
  --p: 50%; 
  
  width: 200px;
  display: inline-block;
  margin: 15px;
  font-size: 18px;
  background: linear-gradient(135deg,#FE6D00,#1384C5) border-box;
  color: #fff;
  padding: 20px;
}
.bottom {
  border-bottom: var(--h) solid #0000;
  clip-path: 
    polygon(0 0,100% 0, /* [1],[2] */
      100% calc(100% - var(--h)), /* [3] */
      calc(var(--p) - var(--w)/2) calc(100% - var(--h)), /* [4] */
      var(--p) 100%, /* [5] */
      calc(var(--p) + var(--w)/2) calc(100% - var(--h)), /* [6] */
      0 calc(100% - var(--h)) /* [7] */
    );
}

.top {
  border-top: var(--h) solid #0000;
  clip-path: 
    polygon(
      0 var(--h),
      calc(var(--p) - var(--w)/2) var(--h),
      var(--p) 0,
      calc(var(--p) + var(--w)/2) var(--h),
      100% var(--h),
      100% 100%,0 100% 
    );
}
.left {
  border-left: var(--w) solid #0000;
  clip-path: 
    polygon(
      100% 0,100% 100%,
      var(--w) 100%,
      var(--w) calc(var(--p) - var(--h)/2),
      0 var(--p),
      var(--w) calc(var(--p) + var(--h)/2),
      var(--w) 0
    );
}
.right {
  border-right: var(--w) solid #0000;
  clip-path:
   polygon(
     0 100%,0 0,
     calc(100% - var(--w)) 0,
     calc(100% - var(--w)) calc(var(--p) - var(--h)/2),
     100% var(--p),
     calc(100% - var(--w)) calc(var(--p) + var(--h)/2),
     calc(100% - var(--w)) 100%
   );
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.