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

Question

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

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

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

[EDIT] Пример вогнутого четырехугольника (своего рода символ "Звездный путь"), использующий # 1 и # 3 выше, можно увидеть здесь .

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

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

[ПРАВИТЬ]

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

Answer 1

Я почти уверен, что нет, потому что, хотя CSS полагается на матричные преобразования, это не свободное преобразование координат - прямоугольные координаты ограничиваются с помощью отражений:

Если у нас есть прямоугольник (p1, p2,p3, p4) с p1 напротив p3 и p2 напротив p4, CSS-представление этого прямоугольника представляет собой фигуру, определенную с использованием только трех точек: p1, p2, p3 и затем подразумеваемой точки p4, которая всегда вычисляется как {p2, отраженная надсредняя точка линии p1-p3}.Любые манипуляции с тремя действительными координатами для прямоугольника приведут к изменению четвертой, подразумеваемой координаты.

Это делает невозможным получение вогнутого четырехугольника.