我在背景和盒子阴影方面遇到了一些问题。
正如你在图片中看到的,三角形(用 CSS 制作)有一个边框可以显示那个洞,打破了两个元素的 box-shadow 的阴影。
代码如下:
/* 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>
我已经尝试在箭头类中使用透明背景,但没有办法实现它。
如果有任何方法可以解决这个问题,我很想知道未来可能出现的项目。
使用边缘创建三角形可能会导致不良结果,例如您遇到的
box-shadow
. 但要做你想做的事,你不必使用边框来创建这些形状。您可以创建一个任意宽的正方形,然后将其旋转 45 度以制作一个“菱形”。以这样的方式定位该钻石,使其位于文本气泡下方并且只有一半可见......您已经有了您正在寻找的三角形!然后的想法是:
transform: rotate(45deg)
calc
定位元素,位置将从您给框的宽度/高度的中间计算。好消息是,由于您使用的是块本身而不是透明边框,因此属性仍然存在并且比以前更好地工作(尽管可能仍然存在一些“附带损害”,其中一些可以通过玩来修复框或阴影位置的值)。
箭头的代码如下所示:
这是一个演示: