我用 CSS 完成了下面的图像：
正如您所看到的，三角形有一个间隙，可以将框阴影与工具提示分开。
代码如下：
/* Generated by less 2.5.1 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Demo of the tool-tip CSS */
.tooltip {
text-decoration: underline;
color: #37b9b5;
cursor: default;
}
.tooltip-bubble {
position: absolute;
z-index: 1;
padding: 5px 10px;
color: #fff;
width: auto;
box-shadow: 7px 7px 11px 0px rgba(112, 111, 111, 0.3);
background-color: transparent;
border-radius: 10px;
}
.tooltip-bubble div {
position: relative;
z-index: 1;
font-size: 12px;
}
.tooltip-bubble::before {
position: absolute;
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #706f6f;
border-radius: 10px;
}
.tooltip-bubble .arrow {
content: '';
display: block;
position: absolute;
top: 100%;
left: 50%;
width: 0px;
height: 0px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
transform: translate(-50%, 0);
box-shadow: 7px 7px 11px 0px rgba(112, 111, 111, 0.3);
}
.tooltip-bubble .arrow.up {
top: -10px;
border-bottom: 10px solid #706f6f;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.tooltip-bubble .arrow.down {
border-top: 10px solid #706f6f;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
<div class="tooltip-bubble"><div>Tutorial de uso</div><div class="arrow down"></div></div>
我尝试了透明背景颜色，但它不起作用。
一种稍微不同的方法，我只为向下箭头完成了它。
我没有使用 CSS 创建三角形，而是创建了一个正方形并将其旋转 45 度。我能想到的这种方法的唯一缺点是工具提示气泡的高度需要等于或大于箭头宽度的一半。
您可能还想将箭头上的阴影更改为位于正方形的右侧，而不是右下角，以便它在旋转后起作用。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Demo of the tool-tip CSS */
.tooltip {
text-decoration: underline;
color: #37b9b5;
cursor: default;
}
.tooltip-bubble {
position: absolute;
z-index: 1;
padding: 5px 10px;
color: #fff;
width: auto;
box-shadow: 7px 7px 11px 0px rgba(112, 111, 111, 0.3);
background-color: transparent;
border-radius: 10px;
}
.tooltip-bubble div {
position: relative;
z-index: 1;
font-size: 12px;
}
.tooltip-bubble::before {
position: absolute;
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #706f6f;
border-radius: 10px;
}
.tooltip-bubble .arrow {
background-color: #706f6f;
content: '';
display: block;
position: absolute;
left: 50%;
height: 10px;
width: 10px;
transform: translate(-50%, 0) rotate(45deg);
box-shadow: 7px 7px 11px 0px rgba(112, 111, 111, 0.3);
}
.tooltip-bubble .arrow.down {
margin-top: -5px;
top: 100%;
}
<div class="tooltip-bubble"><div>Tutorial de uso</div><div class="arrow down"></div></div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
