如何创建一个带有框阴影的箭头弹出框？ [复制]

Question

我设法得到一个像这样的带有框阴影的弹出框，但它看起来不正确，箭头看起来像边缘的菱形。我怎样才能使它更大，并且像这样在侧面只有一个三角形。也需要一个盒子阴影

.audio-arrow-box {
  position: fixed;
  top: 30%;
  background: white;
  border-radius: 6px;
  display: block;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
  width: 284px;
  height: 200px;
  z-index: 99;
  margin-left: 50px;
}

.audio-arrow-box::after {
  z-index: -99;
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  margin-left: 0;
  bottom: 0;
  top: calc(25% - 5px);
  left: 0;
  box-sizing: border-box;
  border: 5px solid #fff;
  border-color: transparent transparent #fff #fff;
  transform-origin: 0 0;
  transform: rotate(45deg);
  box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.4);
}

.audio-arrow-box::before {
  z-index: 10;
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  margin-left: 0;
  bottom: 0;
  top: calc(25% - 5px);
  left: 0;
  box-sizing: border-box;
  border: 5px solid black;
  border-color: transparent transparent #fff #fff;
  transform-origin: 0 0;
  transform: rotate(45deg);
}

<div class="audio-arrow-box"></div>

Answer 1

这不一定能解决形状问题，但您可以使用filter: drop-shadow 在整个元素上获得一个阴影，而不是为箭头单独设置一个阴影。

.audio-arrow-box {
  position: fixed;
  top: 30%;
  background: white;
  border-radius: 6px;
  display: block;

  /* replaced box-shadow with filter */
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));

  width: 284px;
  height: 200px;
  z-index: 99;
  margin-left: 50px;
}

.audio-arrow-box::after {
  z-index: -99;
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  margin-left: 0;
  bottom: 0;
  top: calc(25% - 5px);
  left: 0;
  box-sizing: border-box;
  border: 5px solid #fff;
  border-color: transparent transparent #fff #fff;
  transform-origin: 0 0;
  transform: rotate(45deg);

  /* removed box-shadow rule */
}

.audio-arrow-box::before {
  z-index: 10;
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  margin-left: 0;
  bottom: 0;
  top: calc(25% - 5px);
  left: 0;
  box-sizing: border-box;
  border: 5px solid black;
  border-color: transparent transparent #fff #fff;
  transform-origin: 0 0;
  transform: rotate(45deg);
}

<div class="audio-arrow-box"></div>