CSS三角形和盒子阴影

Question

我用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>

我试过透明的背景颜色,但它不起作用.

Answer 1

一种稍微不同的方法,我只是为向下箭头做了.

我没有使用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>