Shadow of irregular images (such as dialog box) and graphic shadow dialog box

Shadow of irregular images (such as dialog box) and graphic shadow dialog box

In daily development, a pop-up dialog box with arrows is used. Sometimes, a shadow is added for the sake of appearance or highlight. Because the image is irregular and may be spliced by multiple elements, the box-shadow attribute may not meet the requirements.

Here we recommend a similar property, the drop-shadow under the filter.

<div class="triangle"></div>

.triangle{    width: 200px;    height: 60px;    position: relative;    filter: drop-shadow(0 0 5px #ccc);    background-color: #fff;}.triangle:after{    content: "";    position: absolute;    left: 20px;    bottom: -10px;    width: 20px;    height: 20px;    background-color: #fff;    transform: rotate(45deg);}

:

In the same case, replace box-shadow ,:

That is, the triangle constructed by pseudo-classes is not within the shadow range.

Return to drop-shadow and move the triangle down to completely isolated from the subject.

.triangle{    width: 200px;    height: 60px;    position: relative;    filter: drop-shadow(0 0 5px #ccc);    background-color: #fff;}.triangle:after{    content: "";    position: absolute;    left: 20px;    bottom: -50px;    width: 20px;    height: 20px;    background-color: #fff;    transform: rotate(45deg);}

:

That is, drop-shadow is the shadow that modifies the overall outline of an element (including child elements. This is of great help for granting shadow effects to complex images.

PS: closer to the real shadow, drop-shadow does not work for elements that are transparent to the background color. While box-shadow still works for elements that are transparent to the background color.