web front-end entry to the real: css to achieve shadow (such as dialog boxes) irregular graphics

In the daily development will use the pop-up dialog box with arrows, sometimes for aesthetic or highlight, add a shadow. Due to the irregular pattern and may be formed by splicing together a plurality of elements, such box-shadow property may not meet the demand. It is recommended that a similar property, 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);
}
专门建立的学习Q-q-u-n ⑦⑧④-⑦⑧③-零①②  分享学习方法和需要注意的小细节，互相交流学习，不停更新最新的教程和学习技巧（从零基础开始到WEB前端项目实战教程，学习工具，全栈开发学习路线以及规划）

Renderings:

Under the same circumstances, into box-shadow, renderings:

I.e. triangular pseudo-class configuration is not within the shaded range.

Back to the drop-shadow, the complete isolation of the lower triangle position and moved to the main body

<pre>

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

Renderings:

That is, drop-shadow is a shading element to change the entire profile (including sub-elements). This gives us a complex graphics shadow effects provide a great help.

PS: closer to a real shadow, drop-shadow on the background color of the transparent element does not work. The box-shadow for the transparent element background color is still functioning.