常用CSS样式

正方形加三角阴影效果

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