我想知道如何实现图片中的工具提示?带有倒置边框的圆 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>
最佳答案
如果您的引用页面也在网络上,您可以“检查元素”并查看它是如何完成的,但它很可能是 SVG 或嵌入了提示和阴影的纯图像(进一步建议通过阴影右侧的绘制方式)- 仅通过拼接矩形无法获得准确的复制品。
关于html - 如何创建带有倒圆 Angular 三 Angular 形边框的工具提示?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57604576/