如果 after 是一个三角形，如何将 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

说要将 :before 伪元素添加到相同的 class 然后设置 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 2px 6px 2px rgba(0, 0, 0, 0.5),  0 0px 6px 2px rgba(0, 0, 0, 0.5);
  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(2px 4px 2px   rgba(0, 0, 0, 1));
}
body {background:yellow;}

/* zie smiley for ze fun */


.smiley  {
  background:white;
  width:30px;
  height:14px;
  display:block;
  margin:20px auto 0;
  border-radius: 50% / 0 0 100% 100% ;
  display:flex;
  justify-content:space-between;
  box-shadow: 0 0 2px black, inset 2px 2px 2px turquoise;
  
}
.smiley:before, .smiley:after {
  content:'';
  float:left;;
  height:10px;
  width:10px;
  background:inherit;
  border-radius:50%; 
  margin-top:-15px;  
  box-shadow:inherit;
}

<div class="controll_btn">  <span class='smiley'></span></div>

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

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

How to add box-shadow to ::after when after if is a triangle?

html

css

after-effects

box-shadow