CSS implements shadows for irregular elements

When everyone is working, especially when writing page styles, I believe that box-shadowthe shadow attribute is used in many places. However, this attribute can only be used on regular elements, or in other words, it can only be used on one element. Then when we encounter irregular elements When adding a shadow, it is more difficult. However, CSSa solution to this problem is provided. Today, we will introduce it in detail:

If we want to realize this graphic, the first thing that comes to mind is to draw a square first, and then use pseudo elements or sub-elements to draw small squares. The code is as follows:

<div class="box">我是一个不规则的盒子</div>

.box {
    
    
   width: 200px;
   height: 200px;
   background-color: deeppink;
   border-radius: 20px;
   position: relative;
   margin: 200px 200px;
   display: flex;
   justify-content: center;
   align-items: center;
   color: #fff;
   font-size: 16px;
 }
 .box:before {
    
    
   content: '';
   position: absolute;
   left: 50%;
   top: -4.5px;
   transform: rotateZ(45deg) translate(-50%);
   width: 30px;
   height: 30px;
   border-radius: 2px;
   background-color: deeppink;
 }

At this time, if we want to add a shadow, the usual approach is to add a shadow to the box first, and then add a shadow to the child elements:

.box {
    
    
	box-shadow: 0 0 10px 2px yellow;
}
.box:before {
    
    
	box-shadow: 0 0 10px 2px yellow;
}

We looked at the effect and found that the effect we wanted was not achieved

! ! ! This time we use a style: filter(drop-shadow)：

.box {
    
    
	filter: drop-shadow(0 0 10px yellow);
}