正方形加三角阴影效果
div{
width: 200px;
margin: 200px 0;
height: 200px;
background: #dfb311;
position: relative;
border-radius: 10px;
font-size: 30px;
display: flex;
align-items: center;
justify-content: center;
filter: drop-shadow(2px 2px 10px rgba(0,0,0,.5));
}
div::after {
content: '';
display: inline-block;
border: 20px solid #dfb311;
border-color: transparent transparent transparent #dfb311;
position: absolute;
right: -40px;
top: calc(50% - 20px);
}
阴影.png
