css矩形凹陷效果_纯css实现右侧向内凹的矩形

身为一个前端小白，有时可能会要做一下特殊的图形，比如右侧向内凹的矩形，今天我就简单做了一个，供大家参考，如果有更好的大家也可以私信我，废话不多说，直接贴代码

实现效果为

css代码为

.vip-control-header {
width: 100px;
height: 20px;
margin: auto;
background: #F8F8F8;
border: 1px solid black;
position: relative;
}
.vip-control-header:before,
.vip-control-header:after {
position: absolute;
content: " ";
top: 0px;
left: 81px;
display: block;
width: 0;
height: 0;
border: 10px solid #F8F8F8;
border-color: transparent #F8F8F8 transparent transparent;
z-index: 111;
}
.vip-control-header:after {
left: 80px;
border-color: transparent black transparent transparent;
z-index: 11;
}