css 三角、箭头

<div id="testDiv"></div>

    #testDiv{
        margin: 1.5rem 5rem 1rem 5rem;
        background-color: #ebf1fe;
        border: 1px solid #cdcdcd;
        padding: 1rem 1.5rem 2rem;
        position: relative;
    }
    #testDiv:before{
        box-sizing: content-box;
        width: 0px;
        height: 0px;
        position: absolute;
        top: -40px;;
        right:calc(50% - 19px);
        padding:0;
        border-bottom:20px solid #ebf1fe;
        border-top:20px solid transparent;
        border-left:20px solid transparent;
        border-right:20px solid transparent;
        display: block;
        content:‘‘;
        z-index: 12;
    }
    #testDiv:after{
        box-sizing: content-box;
        width: 0px;
        height: 0px;
        position: absolute;
        top: -42px;;
        right:calc(50% - 20px);;
        padding:0;
        border-bottom:21px solid #CCCCCC;
        border-top:21px solid transparent;
        border-left:21px solid transparent;
        border-right:21px solid transparent;
        display: block;
        content:‘‘;
        z-index:10
    }