Фон блока в форме параллелограма

#css #html5 #svg

Нужно сделать фон в форме параллелограмма, как на этой картинке


Как сделать это?

Нужно чтобы работало в браузерах IE11, Mozilla, Opera, Edge, Chrome.
    

Ответы

Ответ 1

Еще как вариант можно использовать 2d трансформации:



.block
{
  width: 90vw;
  height: 80vh;
  transform:skewY(-5deg);
  margin: 40px auto;
  background: teal;
}





Ответ 2

Для этих целей можно использовать clip-path  








Или маску  








Оба варианта адаптивны и работают во всех современных браузерах, включая IE


Ответ 3

Кстати, хочу отметить, что вариант @Alexandr_TT работает ещё и через CSS, благодаря
свойству clip-path



body {
  margin: 0;
  min-height: 100vh;
  background: url('https://artescapesonoma.com/wp-content/uploads/2019/01/abstract-art-background-370799.jpg')
no-repeat center center / cover;
  position: relative;
}

.clip-path {
  width: 350px;
  height: 300px;
  position: relative;
  background: url('https://images.pexels.com/photos/1020315/pexels-photo-1020315.jpeg')
no-repeat center center / cover;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  /* Clip Path */
  clip-path: url(#Cp);
}

.hideSVG {
  position: absolute;
  width: 0;
  height: 0;
}







О свойстве



Поддержка