clip-path的妙用

*{
    margin:0;
    padding:0;
}
div{
    position: relative;
    width:200px;
    height:100px;
    background:#ffbe00;
    display: inline-block;
    font-size: 0;
    /*-webkit-clip-path:polygon(50% 0%, 100% 50%, 50% 100%);
    -webkit-transition:all .5s;*/
    -webkit-clip-path:polygon(0 0, 100% 0,100% 90px,50% 100%,0 90px);
}
div:after{
    content:"";
    display: inline-block;
    width:100%;
    height:20px;
    position: absolute;
    bottom:0;
    left:0;
    background:red;
    -webkit-clip-path:polygon(50% 0,100% 100%,0 100%);
}

<div></div>