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.