Как с помощью css нарисовать геометрическую фигуру?
Как-то так) Без SVG и для любого фона)
https://jsfiddle.net/webirus/qm7sxj2x/1/
https://jsfiddle.net/814646ey/
Цвет border-right замените на цвет фона
Высоту border-top и border-bottom на половину высоты Вашего блока
А с шириной border-right поиграйтесь так, чтобы он выпирал на столько, на сколько Вам нужно (если задать то же самое число, что и в border-top/border-bottom, получите прямой угол)
UPD.: Ярослав верно заметил, но можно обойтись без svg, даже если нужна прозрачность
https://jsfiddle.net/814646ey/2/