【原创】CSS 实现尖角矩形

参考文章：https://www.jianshu.com/p/da55d3bb3a7f
https://blog.csdn.net/weixin_45849112/article/details/109236966

<style>
        #demo {
        position: relative;
        left:400px;
        width: 74px;
        height: 28px;
        border: 1px solid #D7D7D7;
        background:#fff
    }

    #demo::before {
        position: absolute;
        left: 100%;
        width: 0px;
        height: 0px;
        content: "";
        top: 7px;
        border-top: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 5px solid transparent;
        border-left: 5px solid #D7D7D7;
    }
    #demo::after {
        position: absolute;
        left: 100%;
        width: 0px;
        height: 0px;
        content: "";
        top: 8px;
        border-top: 4px solid transparent;
        border-right: 4px solid transparent;
        border-bottom: 4px solid transparent;
        border-left: 4px solid white;
    }
    </style>
    <div id="demo">

    </div>