Czy istnieje sposób na utworzenie złożonego kształtu wielokąta z dowolnego obrazu w CSS do wykorzystania we właściwościach regionów?

Próbuję znaleźć sposób na przekształcenie dowolnego czarnego obrazu w kształt wielokąta.Czy istnieje sposób na utworzenie złożonego kształtu wielokąta z dowolnego obrazu w CSS do wykorzystania we właściwościach regionów?

Problem usiłuję rozwiązać składa się z dwóch etapów:

Konwersja obrazu do wielokąta
Napełnić wielokąt z tekstem

mam zmaga się od pierwszego kroku . Ponieważ nie znalazłem żadnego "konwertera", jedyny pomysł, jaki mi pozostało, to przekształcenie obrazu w format SVG (jeśli nie jest to już SVG), następnie pobranie danych wektorowych i wklejenie go wewnątrz kodu CSS kształt wielokąta (podobnie jak w przypadku Raphaël.js).

Czy to jedyne podejście?

Ograniczenia:

Nie chcę, aby ton div, które tworzą kształt.
Nie chcę używać JavaScript do tego zadania.
Jeśli kształt jest złożony, musi to być wielokąt.

Poniżej przedstawiono przykłady tego, co próbuję zrobić (jestem zainteresowany tylko w złożonych wielokątów).

Wszelkie wskazówki dotyczące rodzajów podejść należy używać?

Zdjęcia wykonane z Adobe: http://adobe.github.com/web-platform/samples/css-exclusions/

Źródło

2013-02-21 acudars

Niestety to wciąż nie przyszedł, aby Mu. [Tutaj jest artykuł] (http://blogs.adobe.com/webplatform/2013/10/23/css-shapes-visual-storytelling/), który zapewnia lepszy wgląd w przyszłe możliwości, które przypominają to, co chcesz za pomocą regionów CSS –

To prawie odpowiada na moje pytanie: http://sarasoueidan.com/blog/css-regions-with-shapes-for-readability/index.html – acudars

Można użyć zdjęcie pudełka maskowania, szczegóły w this article oraz próbkę w tym (próbki WebKit tylko) link

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

Wynik:

enter image description here

** EDIT **

Moar blisko edgy techs !!

Musisz iść do http://html.adobe.com/webplatform/enable/ w Chrome lub Chrome Canary sekcji znajdziesz wiersz, który mówi:

Aby włączyć kształty, regiony i tryby mieszania:

kopiowanie i wklejanie chrome: // flags/# enable-experimental-web-platform-features na pasku adresu , a następnie naciśnij enter.

Kliknij link "Włącz" w tej sekcji.

Kliknij przycisk "Uruchom ponownie" u dołu okna przeglądarki.

Uwaga: Przed ponownym uruchomieniem można włączyć wiele funkcji.

Oto smoki !!

Jeśli jesteś wystarczająco odważny, aktywuj funkcje eksperymentalne, a będziesz cierpiał całą wspaniałość potężnych kształtów na podstawie obrazów! woow :)

tutaj masz pióro próbki, które będą pracować tylko wtedy, gdy trzeba było aktywowane funkcje eksperymentalne =>http://codepen.io/anon/pen/yhIbE

Jeśli wszystko poszło ok, można zobaczyć sylwetkę kaczki i kaczki w późniejszym pkt i to nie jest wszystko skróconych lub obcięty ma cały tekst zawinięty;)

enter image description here

to wszystko jest bardzo eksperymentalny, ale pewnego dnia będzie można robić takie rzeczy we wszystkich przeglądarkach, ponieważ każdy aspekt wyszczególnione w ten post jest w wersji W3C.

Cheers!

EDIT:

Znalazłem ciekawy artykuł na ten temat: http://hansmuller-webkit.blogspot.com.es/2013/11/css-shapes-from-images.html

Źródło

2014-02-18 13:30:16 markcial

, które tnie tekst, więc jest nie do przyjęcia – acudars

Rozwiązanie jest bardzo ostre , ciągle tego chcesz? jest potrzebny do aktywacji niektórych funkcji eksperymentalnych w najnowszych przeglądarkach – markcial

Czy istnieje sposób na utworzenie złożonego kształtu wielokąta z dowolnego obrazu w CSS do wykorzystania we właściwościach regionów?

Odpowiedz

Powiązane problemy