Có cách nào để tạo hình đa giác phức tạp từ bất kỳ hình ảnh nào trong CSS để sử dụng trong thuộc tính vùng không?

Question

Tôi đang cố tìm cách chuyển đổi bất kỳ hình ảnh đen nào thành hình đa giác.

Vấn đề tôi đang cố gắng để giải quyết bao gồm hai bước sau:

1. Chuyển đổi hình ảnh thành một đa giác
2. Điền đa giác với văn bản

Tôi đang phải vật lộn với bước đầu tiên . Vì tôi không tìm thấy bất kỳ "công cụ chuyển đổi" nào, ý tưởng duy nhất tôi còn lại là chuyển đổi hình ảnh thành định dạng SVG (nếu nó không phải là SVG), sau đó tìm nạp dữ liệu vectơ và dán nó vào bên phải CSS hình đa giác (tương tự như được thực hiện với Raphaël.js).

Đây có phải là cách tiếp cận duy nhất không?

ràng buộc:

• Tôi không muốn thực hiện tấn divs rằng sẽ tạo nên một hình dạng.
• Tôi không muốn sử dụng JavaScript cho tác vụ này.
• Nếu hình dạng phức tạp, nó phải là đa giác.

Dưới đây là ví dụ về những gì tôi đang cố gắng làm (Tôi chỉ quan tâm đến đa giác phức tạp).

Bất cứ lời khuyên về các loại phương pháp tôi nên sử dụng?

hình ảnh lấy từ Adobe: http://adobe.github.com/web-platform/samples/css-exclusions/

Answer 1

Bạn có thể sử dụng một hình ảnh cho hộp mặt nạ, các chi tiết trong this article và một mẫu trong (mẫu webkit chỉ) này 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> 

Kết quả:

** EDIT **

Moar close edgy techs !!

Bạn cần phải đi đến http://html.adobe.com/webplatform/enable/ trong chrome hoặc chrome phần chim hoàng yến bạn sẽ tìm thấy một dòng nói rằng:

Để kích hoạt Shapes, khu vực, và Blend Modes:

• Sao chép và dán chrome: // flags/# bật-thử nghiệm-web-nền tảng-tính năng vào thanh địa chỉ , sau đó nhấn enter.
• Nhấp vào liên kết 'Bật' trong phần đó.
• Nhấp vào nút 'Khởi chạy ngay bây giờ' ở cuối cửa sổ trình duyệt.

Lưu ý: Bạn có thể bật nhiều tính năng trước khi khởi chạy lại.

Đây là con rồng !!

Nếu bạn đủ can đảm, hãy kích hoạt các tính năng thử nghiệm và bạn sẽ phải chịu đựng tất cả sự tức giận của các hình dạng mạnh mẽ từ hình ảnh! woow :)

đây you have a pen mẫu mà sẽ chỉ làm việc khi bạn đã kích hoạt tính năng thử nghiệm =>http://codepen.io/anon/pen/yhIbE

Nếu tất cả đã đi ok, bạn có thể thấy một hình bóng vịt và một con vịt trong đoạn sau , và nó là tất cả không cutted hoặc cắt bớt nó có tất cả văn bản bọc;)

đó là tất cả rất thực nghiệm, nhưng một ngày nào đó bạn sẽ có thể làm những việc như vậy trong tất cả các trình duyệt, bởi vì mọi khía cạnh chi tiết trong bài đăng này nằm trong bản nháp của W3C.

• Shape inside with data uris and images
• Shape alpha channel treeshold

Cheers!

EDIT:

Tìm thấy một bài viết tốt đẹp về chủ đề này: http://hansmuller-webkit.blogspot.com.es/2013/11/css-shapes-from-images.html