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>

Answer 2

您可以使用变换。他们现在 pretty well supported

/* 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;
  z-index: 1;
}
.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: 7px solid #706f6f;
  transform: rotate(45deg) translate(-50%, -50%);
  transform-origin: 0 0;
  z-index: 0;
}

<div class="tooltip-bubble"><div>Tutorial de uso</div><div class="arrow down"></div></div>

CSS 三角形和方框阴影

CSS Triangles and box-shadows

html

css

box-shadow