试试这个：

.tooltip {
  position: absolute;
  padding: 25px;
  left: 20%;
  top: 40%;
  width: 50px;
  height: 50px;
  background: #f2709c;
  border-radius: 50%;
}

.tooltip:before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  bottom: -20px;
  right: 0;
  border-bottom: 50px solid #f2709c;
  border-left: 40px solid transparent;
  rotate: 173deg;
}

<div class="tooltip">
</div>

你可以尝试一下clip路径和background-attachment。

body {
  margin: auto;
  background: black;
}

section {
  /* draw simili borders */
  filter: drop-shadow( 3px 3px 1px white) drop-shadow(-3px 3px 1px white) drop-shadow(3px -3px white) drop-shadow(-3px -3px white)
}

div {
  /* let's be  a square */
  aspect-ratio: 1/1;
  /* any width or height */
  width: 20vw;
  /* turn me into a circle */
  border-radius: 50%;
  /* make the positionning reference */
  position: relative;
  /* stick a background */
  background: url(https://www.highresolutiontextures.com/textures/concrete-walls/hrt-concrete-wall-02.jpg) center;
  background-attachment: fixed;
}

div:before {
  content: '';
  position: absolute;
  width: 50%;
  aspect-ratio: 1/2;
  top: 50%;
  left: 50%;
  /* remove some of it */
  clip-path: circle(100% at -58% 0%);
  /* stick here the background again */
  background: inherit;
}

/* show me that pseudo */

div:hover:before {
  background: red;
}

/* to center the demo */

html {
  display: grid;
  min-height: 100vh;
}

<section>
  <!-- section here to draw the border via filter -->
  <div>
    <!-- I will be a square with an overflowing pseudo -->
  </div>
</section>