Search code examples
htmlcssafter-effectsbox-shadow

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

I want to add box-shadow for all my element (see picture)

But I don't know how correctly add box-shadow for ::after.enter image description here

My CSS code now - 

.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);
}

If somebody know how to add the same box-shadow please write! Thanks!

Solution

  • You may use the dropshadow() filter

    .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