Есть ли способ создать сложную форму многоугольника из любого изображения в CSS для использования в свойствах регионов?

Я пытаюсь найти способ преобразования любого черного изображения в форму многоугольника.

Проблема, которую я пытаюсь решить, состоит из двух шагов:

Преобразование изображения в многоугольник
Заполните многоугольник текстом

Я борюсь с первым шагом. Поскольку я не нашел никакого "конвертера", единственной идеей, которую я оставил, является преобразование изображения в формат SVG (если это уже не SVG), а затем извлекать векторные данные и вставлять их прямо внутри CSS polygon shape (аналогично тому, как это делается с Raphaël.js).

Это единственный подход?

Ограничения:

Я не хочу делать тонны div, которые будут составлять форму.
Я не хочу использовать JavaScript для этой задачи.
Если форма сложна, она должна быть многоугольником.

Ниже приведены примеры того, что я пытаюсь сделать (меня интересуют только сложные полигоны).

Любые советы по типам подходов, которые я должен использовать?

Изображения, взятые из Adobe: http://adobe.github.com/web-platform/samples/css-exclusions/

Ответ 1

Вы можете использовать изображение для маскировки окна, подробности в в этой статье и образец в этом ссылка (только для образца webkit)

<style type="text/css">
.wrap {
  height:400px;
  width:800px;
  -webkit-mask-box-image:url('silhouette.png');
}
</style>
<div class="wrap">Large lipsum here...</div>

Результат:

** РЕДАКТИРОВАТЬ **

Моар теряет технику!

Вам нужно перейти в http://html.adobe.com/webplatform/enable/ в хромовой или хромовой канареечной секции, вы найдете строку, которая гласит:

Чтобы включить режим Shape, Regions и Blend:

Скопировать и вставить хром://flags/# enable-experimental-web-platform-features в адресную строку, затем нажмите клавишу ввода.

Нажмите ссылку "Включить" в этом разделе.

Нажмите кнопку "Повторить сейчас" внизу окна браузера.
Примечание. Перед повторной перезагрузкой можно включить несколько функций.

Вот драконы!!

Если вы достаточно храбры, активируйте экспериментальные функции, и вы будете страдать от всей изощренности могучих фигур из изображений! woow:)

здесь у вас есть образец пера, который будет работать только тогда, когда вы активировали экспериментальные функции = > http://codepen.io/anon/pen/yhIbE

Если все будет хорошо, вы можете увидеть силуэт утки и утку в более позднем абзаце, и все это не обрезается или обрезается, и весь текст завернут;)

Все это очень экспериментально, но когда-нибудь вы сможете делать такие вещи во всех браузерах, потому что каждый аспект, подробно описанный в этом сообщении, представлен в проекте W3C.

Ура!

ИЗМЕНИТЬ:

Найдена хорошая статья о теме: http://hansmuller-webkit.blogspot.com.es/2013/11/css-shapes-from-images.html