美文网首页让前端飞前端教程技术干货
小Tip:有三角的指示框阴影实现

小Tip:有三角的指示框阴影实现

作者: 不二很纯洁 | 来源:发表于2018-07-18 18:38 被阅读3次
    有三角的指示阴影框

    利用css3滤镜 drop-shadow

    直接上代码:

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    .box{
        width:200px;
        filter: drop-shadow(0px 0px 2px rgba(0,0,0,0.4));
    }
    .jiao{
        height: 0px;
        width: 0px;
        border-right: 10px solid transparent;
        border-bottom: 10px solid #fff;
        border-left: 10px solid transparent;
        margin: 0 auto;
    }
    .con{
        width:200px;
        height:200px;
        background: #fff;
        border-radius: 5px;
    }
    </style>
    </head>
    <body>
        <div class="box">
            <div class="jiao"></div>
            <div class="con"></div>
        </div>
    </body>
    </html>
    

    相关文章

      网友评论

        本文标题:小Tip:有三角的指示框阴影实现

        本文链接:https://www.haomeiwen.com/subject/bgdapftx.html