Вогнутый четырехугольник из прямоугольника

Можно ли, используя только CSS, создать четырехугольник с внутренним углом больше 180 градусов, манипулируя одним прямоугольником? Я знаю, что произвольный выпуклый четырехугольник может быть создан из стандартного прямоугольника с помощью преобразований CSS3.

Мне удалось создать вогнутые многоугольники, используя несколько прямоугольников несколькими способами (иногда с помощью скрытия переполнения) ); некоторая комбинация:

  1. смежных прямоугольников. Это проблема, потому что визуальные расхождения возникают на швах из-за сглаживания, что более очевидно на высококонтрастном фоне. Эффект может быть особенно плохим при использовании в сочетании с вращением (кроме «хорошего» вращения, например, на 45 градусов). Прямоугольники также имеют безумную тенденцию к странному выравниванию при различных уровнях масштабирования.
  2. Перекрывающиеся прямоугольники, при этом четырехугольник состоит из объединения прямоугольников (цвет каждого прямоугольника - это цвет четырехугольника). Это проблема, когда для цвета четырехугольника используется альфа-канал, потому что перекрывающаяся область кажется темнее.
  3. Перекрывающиеся прямоугольники, при этом четырехугольник состоит из разницы прямоугольников (цвет по крайней мере одного прямоугольника является цветом фона).

[РЕДАКТИРОВАТЬ] Пример вогнутого четырехугольника (что-то вроде символа "Звездного пути") с использованием # 1 и # 3 выше можно увидеть здесь .

Я хотел бы иметь вогнутый четырехугольник с смоделированной внутренней тенью (темный цвет переднего плана с альфа-каналом, светлый цвет тени с альфа-каналом), поэтому № 2 и № 3 выше проблематичны. На данный момент реальная тень не может быть и речи; У меня не было хорошего опыта работы с тенями от измененных элементов.

Итак, есть ли возможность сделать это, манипулируя одним прямоугольником? Или есть другой способ, который я не рассматривал?

[EDIT]

Я думаю, что это возможно до некоторой степени, но это своего рода чит: используйте односимвольный текст, глиф которого уже является вогнутым четырехугольником, в каком-нибудь достаточно безопасном шрифте (например, U + 27A4, черная стрелка вправо в Arial Unicode), а затем преобразуйте это дерьмо. Однако при этом возникнут проблемы с согласованием между браузерами и другими элементами страницы.

6
задан Nathan Ryan 16 May 2011 в 11:54
поделиться