html - 如何创建带有倒圆 Angular 三 Angular 形边框的工具提示？

Question

我想知道如何实现图片中的工具提示？带有倒置边框的圆 Angular 三 Angular 形，就像在底部？

.tooltip {
  position: relative;
  margin: 3em;
  padding: 1em;
  box-sizing: border-box;
  background: #bada55;
  box-shadow: 0px 3px 3px 0 rgba(0, 0, 0, 0.4);
}
.tooltip::after{
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    margin-left: -0.5em;
    bottom: -2em;
    left: 50%;
    box-sizing: border-box;
    
    border: 1em solid black;
    border-color: transparent transparent #bada55 #bada55;
    
    transform-origin: 0 0;
    transform: rotate(-45deg);
    
    box-shadow: -3px 3px 3px 0 rgba(0, 0, 0, 0.4);
  }

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

Answer 1

如果您的引用页面也在网络上，您可以“检查元素”并查看它是如何完成的，但它很可能是 SVG 或嵌入了提示和阴影的纯图像(进一步建议通过阴影右侧的绘制方式)- 仅通过拼接矩形无法获得准确的复制品。