Угол под 45 градусов у div

Друзья, может кто-то сталкивался с подобной задачей... Необходимо у div срезать углы (верхний-левый и нижний правый), под углом 45 градусов.
реализовал через clip-path
.corner45top { -webkit-clip-path: polygon(5% -200%, 100% 0%, 100% 100%, 0% 100%, 0% 100%, 0% 100%); clip-path: polygon(5% -200%, 100% 0%, 100% 100%, 0% 100%, 0% 100%, 0% 100%); clip-path: url("#swipe__clip-path"); background-color: #FFFFFF; box-shadow: 0 1px 6px 0 rgba(86,86,86,0.25); }
.corner45bottom { -webkit-clip-path: polygon(0 -100%, 100% 0%, 98% 100%, 0% 100%, 0% 100%, 0% 100%); clip-path: polygon(0 -100%, 100% 0%, 98% 100%, 0% 100%, 0% 100%, 0% 100%); clip-path: url("#swipe__clip-path-bottom"); background-color: #FFFFFF; box-shadow: 0 1px 0 0 rgba(86,86,86,0.25); }

Но все эти "красивости" никак не работают в браузере EDGE, есть ли какой-то простой вариант вылечить это? Мог бы сделать углы например картинкой, но за блоками есть background-image цветной(

Ответ

Для этого нам на помощь приходит SVG , подходит такой вариант ?