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

113
06 сентября 2019, 23:50

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

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

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

Answer 1

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

.block 
{ 
  width: 90vw; 
  height: 80vh; 
  transform:skewY(-5deg); 
  margin: 40px auto; 
  background: teal; 
}
<div class="block"> 
 
</div>

Answer 2

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

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"  
    xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 606 256" preserveAspectRatio="xMinYMin meet" > 
   <defs> 
   <clipPath id="Cp">  
    <path d="M0.5 38.1 595.7 3.1V218.9L0 256Z" style="fill:none;stroke:#000"/> 
    </clipPath> 
      
    </defs>    
 
 <image xlink:href="https://i.stack.imgur.com/BOhFs.jpg" clip-path="url(#Cp)" height="100%" width="100%"/> 
   
</svg>

Или маску 

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"  
    xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 606 256" preserveAspectRatio="xMinYMin meet" > 
   <defs> 
   <mask id="msk1">  
     <rect fill="black" width="100%" height="100%" /> 
    <path fill="white" d="M0.5 38.1 595.7 3.1V218.9L0 256Z" /> 
    </clipPath> 
      
    </defs>    
 
 <image xlink:href="https://i.stack.imgur.com/BOhFs.jpg" mask="url(#msk1)" height="100%" width="100%"/> 
   
</svg>

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

Answer 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; 
}
<div class="clip-path"></div> 
 
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 606 256" preserveAspectRatio="xMinYMin meet" class="hideSVG"> 
   <defs> 
   <clipPath id="Cp">  
    <path d="M0.5 38.1 595.7 3.1V218.9L0 256Z" style="fill:none; stroke:#000;" /> 
    </clipPath> 
      
    </defs> 
</svg>

О свойстве

Поддержка

READ ALSO
WordPress:горизонтальная прокрутка DIV
CSS

WordPress:горизонтальная прокрутка DIV

Подскажите пожалуйста, есть ли какой-то плагин или простой способ без встраивания JS библиотек а-ля wowjs и различных слайдеров осуществить...

 128
Стилизация плагина `select2`
javascript

Стилизация плагина `select2`

Есть такой плагин select2Хочу стилизовать его примерно так:

 127
Интерация чисел, пока не станет 1
javascript

Интерация чисел, пока не станет 1

Нужно написать функцию JavaScript,которая возьмет число,и сложит квадрат каждой его цифры, пока не станет 1, если конечно с этим числом это возможноНапример:

 117
Как добавить в lazy load background?
javascript

Как добавить в lazy load background?

Стоит плагин на wp lazy-load, но не работают изображения через стили background

 137