Как создать трапециевидный div с повторением фона

Question

Я хочу сделать изображение, подобное этому в div как следующее изображение. , но я не могу найти подходящие свойства css или js для этого. Может ли кто-нибудь помочь узнать, как это возможно?

Answer 1

Похоже CSS 3D-преобразования. Вот способ webkit сделать это, настроить угол и перспективу по мере необходимости. Вам нужно будет найти что-то эквивалентное для других браузеров, я не думаю, что он полностью стандартизирован.

Просто примените этот CSS к вашему div с фоновым изображением. Я проверил это с прекрасным логотипом stackoverflow в верхней части этой страницы, который является div с фоновым изображением.

Редактировать: И здесь, красная рамка тоже. Не знаю, является ли его часть изображения или вам нужен CSS.

-webkit-transform: perspective(500) rotateY(-60deg); 
border: 3px red solid; 

Answer 2

Это поможет вам

Transform свойства CSS

http://www.w3schools.com/cssref/css3_pr_transform.asp

Answer 3

Я нашел хорошее решение и решить эту проблему с помощью кабинка дракона как following-

Код HTML

<div id="div1"> 
<div id="div2">HELLO</div> 
</div> 

CSS код

#div2 { 
    background: url("") repeat scroll 0 0 rgba(0, 0, 0, 0); 
    border: 1px solid #000000; 
    padding: 50px; 
    position: absolute; 
    transform: rotateY(-234deg); 
} 

#div1 { 
    border: 1px solid #000000; 
    height: 150px; 
    margin: 50px; 
    padding: 10px; 
    perspective: 89px; 
    position: relative; 
    width: 150px; 
}