css3 - poner - imagen de fondo responsive bootstrap

¿Hay alguna forma de crear una forma poligonal compleja a partir de cualquier imagen en CSS para usarla en la propiedad de las regiones?

Question

Estoy tratando de encontrar una manera de convertir cualquier imagen negra en una forma de polígono.

El problema que estoy tratando de resolver consiste en dos pasos:

1. Convertir imagen en un polígono.
2. Rellena el polígono con texto.

Estoy luchando con el primer paso. Como no he encontrado ningún "convertidor", la única idea que me queda es convertir una imagen en un formato SVG (si ya no es un SVG), luego busque los datos vectoriales y péguelos directamente dentro del CSS. Forma de polígono (de manera similar a como se hace con Raphaël.js).

¿Es este el único enfoque?

Restricciones

• No quiero hacer toneladas de divs que conformarán una forma.
• No quiero usar JavaScript para esta tarea.
• Si una forma es compleja debe ser un polígono.

Abajo hay ejemplos de lo que estoy tratando de hacer (solo me interesan los polígonos complejos).

¿Algún consejo sobre los tipos de enfoques que debo usar?

Imágenes tomadas de Adobe: http://adobe.github.com/web-platform/samples/css-exclusions/

Answer 1

Puede usar una imagen para el cuadro de máscara, detalles en este artículo y una muestra en este link ( solo muestra de 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>

Resultado:

** EDIT **

Moar cerca de los técnicos de vanguardia!

Debe ir a http://html.adobe.com/webplatform/enable/ en la sección de chrome o chrome canary encontrará una línea que dice:

Para habilitar las formas, regiones y modos de fusión:

• Copie y pegue chrome: // flags / # enable-experimental-web-platform-features en la barra de direcciones, luego presione intro.
• Haga clic en el enlace ''Habilitar'' dentro de esa sección.
• Haga clic en el botón ''Relanzar ahora'' en la parte inferior de la ventana del navegador.

Nota: se pueden habilitar varias funciones antes de relanzar.

¡¡Aquí hay dragones!!

Si eres lo suficientemente valiente, activa las funciones experimentales y sufrirás toda la estupidez de las poderosas formas de las imágenes. wow :)

Aquí tiene un bolígrafo de muestra que solo funcionará cuando haya activado las funciones experimentales => http://codepen.io/anon/pen/yhIbE

Si todo salió bien, es posible que vea una silueta de pato y un pato en el párrafo posterior, y no está recortado ni recortado, tiene todo el texto envuelto;)

Todo es muy experimental, pero algún día podrás hacer esas cosas en todos los navegadores, porque cada aspecto detallado en esta publicación está en el borrador del W3C.

• Forma interior con uris de datos e imágenes.
• Forma del canal alfa treeshold

¡Aclamaciones!

EDITAR:

Encontré un buen artículo sobre el tema: http://hansmuller-webkit.blogspot.com.es/2013/11/css-shapes-from-images.html