Ответ 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