Вогнутый четырехугольник из прямоугольника
Используя только CSS, можно ли создать четырехугольник с внутренним углом больше 180 градусов, манипулируя одним прямоугольником? Я знаю, что произвольный выпуклый четырехугольник может быть создан из стандартного прямоугольника с помощью преобразований CSS3.
Мне удалось создать вогнутые многоугольники, используя несколько прямоугольников несколькими различными способами (иногда с помощью скрытого переполнения); некоторая комбинация:
- соседние прямоугольники. Это проблема в том, что визуальные несоответствия возникают на швах из-за сглаживания, которое более очевидно с высококонтрастным фоном. Эффект может быть особенно плохим, когда используется в сочетании с вращением (кроме "хорошего" вращения, такого как 45 градусов). Прямоугольники также имеют сводящую с ума тенденцию странным образом выравниваться при различных уровнях масштабирования.
- перекрывающиеся прямоугольники, в результате чего четырехугольник состоит из объединения прямоугольников (цвет каждого прямоугольника является цветом четырехугольник). Это проблема, когда цвет четырехугольника использует альфа-канал, потому что перекрывающаяся область кажется темнее.
Перекрывающиеся прямоугольники, в результате чего четырехугольник состоит из разности прямоугольников (цвет по крайней мере одного прямоугольника является цветом фона). Это проблема при моделировании тени путем рисования одной и той же фигуры со смещением, поскольку перекрывающаяся область переднего плана "стирает" все нижележащие элементы. тень.
[EDIT] пример вогнутого четырехугольника (своего рода символа "Звездного пути") с использованием #1 и #3 выше можно увидетьздесь .
Я хотел бы иметь вогнутый четырехугольник с имитацией тени вставки (темный цвет переднего плана с альфа-каналом, светлый цвет тени с альфа-каналом), поэтому #2 и #3 выше проблематичны. О настоящей тени на данный момент не может быть и речи; у меня не было очень хорошего опыта работы с тенями tweaked элементы.
Итак, есть ли возможность сделать это, манипулируя одним прямоугольником? Или есть какой-то другой способ, который я не рассматривал?
[EDIT]
Я думаю, что это возможно в ограниченной степени, но это своего рода обман: используйте односимвольный текст, глиф которого уже является вогнутым четырехугольником в некотором разумно безопасном шрифте (например, U+27A4, черная стрелка вправо в Arial Unicode), а затем преобразуйте дерьмо из него. Это будет иметь проблемы для кросс-браузера выравнивание с другими элементами страницы, однако.
1 ответ:
Я почти уверен, что нет, потому что, хотя CSS опирается на матричные преобразования, это не свободное преобразование координат-координаты коробки противопоказаны через отражения:
Если у нас есть прямоугольник (p1,p2,p3, p4) с P1 напротив p3 и p2 напротив p4, то CSS-представление этого прямоугольника представляет собой форму, определенную с использованием только трех точек: p1, p2, p3, а затем подразумеваемую точку p4, которая всегда вычисляется как {p2, отраженная над средней точкой линии p1-p3}. Любые манипуляции с тремя реальные координаты для прямоугольника приведут к изменению четвертой, подразумеваемой координаты.
Это делает невозможным получение вогнутого четырехугольника.
Comments