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

Question

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

0

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

Nirjhar Mandal 08 янв. 2014, в 10:38

Источник

0

Покажите свой код.
Hiral 08 янв. 2014, в 08:43
2

stackoverflow.com/questions/9886337/...
Abhitalks 08 янв. 2014, в 08:47
0

Спасибо @abhitalks
Nirjhar Mandal 08 янв. 2014, в 08:50

Показать ещё 1 комментарий

Теги:

javascript

html

css

css3

3 ответа

Ещё вопросы

Dipak · Answer 1 · 2014-01-08T06-56-00.000Z

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

Преобразование свойств css

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

Nirjhar Mandal · Answer 2 · 2014-01-08T06-44-00.000Z

Я нашел хорошее решение и решил проблему с помощью Cubicle Dragon, как 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;
}

Cubicle Dragon · Answer 3 · 2014-01-08T06-12-00.000Z

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

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

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

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