CSS三角形和阴影框 [英] CSS Triangles and box-shadows

问题描述

我用CSS完成了下图:

I got the below image done with CSS:

如您所见，三角形具有一个间隙，可从工具提示中切出阴影.

As you can see, the triangle has a gap that cuts the box-shadow from the tooltip.

代码如下:

/* 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>

我尝试使用透明的背景色，但是不起作用.

I tried transparent background colors, but it's not working.

推荐答案

一种略有不同的方法，我只针对向下箭头.

A slightly different approach and I've only done it for the down arrow.

我没有使用CSS制作三角形，而是创建了一个正方形并将其旋转了45度.我可以用这种方法想到的唯一缺点是工具提示气泡的高度必须等于或大于箭头宽度的一半.

Instead of making a triangle using CSS, I created a square and rotated it by 45 degrees. The only drawback I can think of with this approach is that the tooltip bubble will need to have a height equal to or greater than half the width of the arrow.

您可能还想将箭头上的阴影更改为正方形的右侧，而不是右下角，以便在旋转后可以使用.

You may also want to change the shadow on the arrow to be on the right of the square, rather than bottom right, so that it works after rotation.

* {
  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>

这篇关于CSS三角形和阴影框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！