веб и геометрия - HTML и CSS

default53 · 18.09.2011, 22:23

Только не кричите, что это невозможно и разрушит DOM-структуру.
Задача у меня следующая: необходим некий элемент на веб странице, который будет иметь вид трапеции с фоновой картинкой.
Я думал сделать обычный блок div а фоном в нём поставить картинку обрезанную по форме трапеции. Однако картинок оказалось слишком много и обрезать их все не представляется возможным(т.е. фоновая картинка прямоугольник). Из вариантов я вижу только флэш и канвас, но канвас не поддерживается старыми браузерами (что в моём случае критично), а флэшем я не владею.
Сам блок может быть любой формы (хоть обычный дивовский прямоугольник), но выглядеть он должен как трапеция.
Помогите пожалуйста решить эту проблемку.

Lesha · 19.09.2011, 00:00

сделать прямоугольный блок, внутрь него вставить таблицу

в таблице 3 колонки. крайние содержат 2 прозрачных рисунка, которые создают эффект трапеции.
в самом слое содержится исходная картинка в виде фона

Код HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
.picBlock { padding: 0; margin: 0; }
.picBlock table { border-collapse: collapse; width: 100%; height: 100%; }
.picBlock table tr td { padding: 0; margin: 0; }
.picBlock table tr td.left, .picBlock table tr td.right { width: 30px; height: 100%; }
.picBlock table tr td.left img, .picBlock table tr td.right img { width: 30px; height: 100%; border: none;}
</style>
<body>
Демонстрация картинок
<div class="picBlock" style="background: url('main.jpg'); width: 298px; height: 223px";>
	<table><tr><td class="left"><img src="left.png"></td><td>&nbsp;</td><td class="right"><img src="right.png"></td></tr></table>
</div>

демонстрация : http://jqbook.narod.ru/works/trapeci9/

default53 · 19.09.2011, 07:36

Lesha, Спасибо, идея очень интересная. Но мне нужно реализовать много не равнобоких трапеций. Т.е. угол наклона у сторон всех трапеций разный и придётся обрезать сильно много картинок.

Naive · 19.09.2011, 08:47

Можно нарисовать 4 треугольника и трансформировать их с нужными пропорциями.

default53 · 19.09.2011, 14:51

Naive, А можно пример кода?

Naive · 19.09.2011, 15:11

Пример алгоритма:
Создаем блок трапеции, в нем размещаем 4 невидимых картинки с абсолютным позиционированием, на них рисуем четыре уголка белый цвет/прозрачный.
В функцию передаем оба основания и высоту. Вычисляем наибольшее и наименьшее основания, определяем каким картинкам передать видимость.
Высоту картинки задаем такую-же, как и трапеции, ширину - половину разности оснований.
Правые картинки смещаем от левого края блока на маленькое основание + ширина картинок.

default53 · 19.09.2011, 15:37

Я извиняюсь за тупость, но я не понял(( Можно код или схематически как-то?
Вот картинка с фигурками которые мне нужно получить
http://programmersforum.ru/attachmen...1&d=1316432041
Как видно у всех разные углы и разные стороны.

Naive · 19.09.2011, 16:02

Тогда уж проще использовать канвас, ибо слишком сложная структура получается - от одной до шести закрашивающих областей в зависимости от формы.

default53 · 19.09.2011, 16:08

Не, канвас не катит. У 30% пользователей сайта стоит ие 6. Может есть ещё какие-то варианты? (Народ, подключаемся к дискуссии)

18.09.2011, 22:23	#1
default53 Регистрация: 18.09.2011 Сообщений: 5	веб и геометрия Только не кричите, что это невозможно и разрушит DOM-структуру. Задача у меня следующая: необходим некий элемент на веб странице, который будет иметь вид трапеции с фоновой картинкой. Я думал сделать обычный блок div а фоном в нём поставить картинку обрезанную по форме трапеции. Однако картинок оказалось слишком много и обрезать их все не представляется возможным(т.е. фоновая картинка прямоугольник). Из вариантов я вижу только флэш и канвас, но канвас не поддерживается старыми браузерами (что в моём случае критично), а флэшем я не владею. Сам блок может быть любой формы (хоть обычный дивовский прямоугольник), но выглядеть он должен как трапеция. Помогите пожалуйста решить эту проблемку.

19.09.2011, 08:47	#4
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	Можно нарисовать 4 треугольника и трансформировать их с нужными пропорциями. Alar, верни репу!

19.09.2011, 15:11	#6
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	Пример алгоритма: Создаем блок трапеции, в нем размещаем 4 невидимых картинки с абсолютным позиционированием, на них рисуем четыре уголка белый цвет/прозрачный. В функцию передаем оба основания и высоту. Вычисляем наибольшее и наименьшее основания, определяем каким картинкам передать видимость. Высоту картинки задаем такую-же, как и трапеции, ширину - половину разности оснований. Правые картинки смещаем от левого края блока на маленькое основание + ширина картинок. Alar, верни репу!

19.09.2011, 16:02	#8
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	Тогда уж проще использовать канвас, ибо слишком сложная структура получается - от одной до шести закрашивающих областей в зависимости от формы. Alar, верни репу!

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Геометрия	Pascal.t	Паскаль, Turbo Pascal, PascalABC.NET	2	17.12.2010 00:13

19.09.2011, 07:36	#3
default53 Регистрация: 18.09.2011 Сообщений: 5	Lesha, Спасибо, идея очень интересная. Но мне нужно реализовать много не равнобоких трапеций. Т.е. угол наклона у сторон всех трапеций разный и придётся обрезать сильно много картинок.

19.09.2011, 14:51	#5
default53 Регистрация: 18.09.2011 Сообщений: 5	Naive, А можно пример кода?

19.09.2011, 16:08	#9
default53 Регистрация: 18.09.2011 Сообщений: 5	Не, канвас не катит. У 30% пользователей сайта стоит ие 6. Может есть ещё какие-то варианты? (Народ, подключаемся к дискуссии)