Вот так
https://jsfiddle.net/rye4qjpk/
Это на скорую руку, но суть такая.
Дальше надо пересчитать все в calc, если нужна адаптивность.
div {
position: relative;
width: 100px;
height: 50px;
border-width: 3px 3px 0 3px;
border-color: #f00 #f00 transparent #f00;
border-style: solid;
background: linear-gradient(to right, #f00 0, #f00 40px, transparent 41px, transparent 59px, #f00 60px, #f00 100%) no-repeat bottom center / 100% 3px;
}
div:after {
content: "";
position: absolute;
display: block;
bottom:-9px;
left: 41px;
width: 14px;
height: 14px;
transform: rotate(-45deg);
border-bottom: 3px solid #f00;
border-left: 3px solid #f00;
}
Средний
