css实现div左侧突出一个带边框的三角形

.vip-control-header{
    width: 600px;
    height: auto;
    background: #F8F8F8;
    border: 1px solid #e2e2e2;
    padding: 10px 0 10px 10px;
    position: relative;
    border-radius: 5px;
}
.vip-control-header:before,.vip-control-header:after{
    position: absolute;
    content: " ";
    top: 16px;
    left: -16px;
    display: block;
    width: 0;
    height: 0;
    border: 8px solid #F8F8F8;
    border-color: transparent #F8F8F8 transparent transparent;
    z-index: 111;
}
.vip-control-header:after{
    left: -17px;
    border-color: transparent #e2e2e2 transparent transparent;
    z-index: 11;
}

<div class="vip-control-header">
    <span>页面标题: </span>
    <input class="headerChange" type="text" οnchange="headerChange()"/>
</div>

转载于:https://www.cnblogs.com/Mr-Rshare/p/10499747.html