tooltips-border

index.html

<tips>this is tooltips!</tips>

<tips>this is new tooltips!</tips>

<tips class="line">this is tooltips!</tips>

<tips class="line">this is new tooltips!</tips>

style.css

html,body{
  height: 100%;
  margin:0;
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1em;
}

tips{
  position: relative;
  --bg: linear-gradient(45deg, #ff3c41, #ff9800);
  padding: 0.5em 0.8em calc(0.5em + 5px);
  color: #fff;
  filter: drop-shadow(0px 0px 0.5px #333) drop-shadow(0px 0px 0px #333) drop-shadow(0px 0px 0px #333) drop-shadow(0px 0px 0px #333) drop-shadow(0px 0px 0px #333)
}
tips::before,tips::after{
  content:'';
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: var(--bg);
  z-index: -1;
  
}
tips::before{
  clip-path: inset(0 0 5px 0 round 5px);
}
tips::after{
  clip-path: polygon(calc(50% - 5px) calc(100% - 5px), calc(50% + 5px) calc(100% - 5px), 50% 100%);
}
.line{
  --bg: #fff;
  color: #333
}

tooltips-border.markdown

tooltips-border

A Pen by XboxYan on CodePen.

License.