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

#html #css #css3 #internet_explorer #clip_path

Друзья, может кто-то сталкивался с подобной задачей...
Необходимо у 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 цветной(
    

Ответы

Ответ 1

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






Ответ 2

Делаем маску с помощью overflow:hidden. Угол получаем поворотом элемента на 45 градусов
 transform:rotate(-45deg) (внутренний элемент вертим обратно, чтобы был ровно). С помощью
отступов margin регулируем глубину среза.



.container{
   transform:rotate(-45deg);
   overflow:hidden;
   height: 160px;
    margin-top: -30px;
}
.inside{
   transform:rotate(45deg);
   background:#090;
   height:100px;
   width:200px;
   margin:30px auto;
   
}

Тестовый блок