当if是一个三角形时，如何将box-shadow添加到:: after？

Question

我想为我的所有元素添加阴影（见图）

但是我不知道如何为:: after添加框阴影。

现在是我的CSS代码-

.controll_btn {
  transition: all 0.1s ease;
  position: relative;
  width: 50px;
  height: 40px;
  background-color: #00a4ff;
  cursor: pointer;
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  border: none;
  padding: 10px 15px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: space-between;
  outline: none;
  z-index: 5;
}
.controll_btn::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -8px;
  z-index: -50;
  border-top: 11px solid #00a4ff;
  border-left: 11px solid transparent;
  filter: 0 0 6px 0 rgba(0, 0, 0, 0.3);
}

如果有人知道如何添加相同的阴影，请写信！谢谢！

Answer 1

[already an answer表示要向同一类添加:before伪元素，然后设置box-shadow和transform: rotate(45deg)。

Answer 2

您可以使用dropshadow（）过滤器

.controll_btn {
 
  margin:2em;
  transition: all 0.1s ease;
  position: relative;
  width: 50px;
  height: 40px;
  background-color: #00a4ff;
  cursor: pointer;
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  border: none;
  padding: 10px 15px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: space-between;
  outline: none;
  z-index: 5;
  
}
.controll_btn::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -8px;
  z-index: -50;
  border-top: 11px solid #00a4ff;
  border-left: 11px solid transparent;
  filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.3));
}
body {background:yellow;}

<div class="controll_btn"></div>

https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow