2014-11-06 68 views
7

Tôi đã tạo hình ảnh song song bằng cách sử dụng chuyển đổi skew của CSS3 và đặt văn bản trong div khác có giá trị skew ngược lại để văn bản vẫn chưa được chuyển đổi: JSFiddle example.Parallelogram CSS với văn bản

Có cách nào để có văn bản gắn với các cạnh của hình bình hành như thế này:

enter image description here

Tôi mở để gợi ý khác, chẳng hạn như sử dụng canvas nếu nó không thể sử dụng CSS . Nếu có một kỹ thuật JavaScript để làm điều này thì bất kỳ liên kết nào có thể hữu ích sẽ được đánh giá cao.

UPDATE: Sau khi săn tìm một số giải pháp qua trình duyệt, công cụ đơn giản nhất tôi tìm thấy để đạt được điều này là với this tool.

+0

Tôi nghĩ bạn nên cố gắng xoay văn bản như: http://jsfiddle.net/jm1wqemL/1/ –

+1

@VickyGonsalves - vấn đề với điều đó là nó lệch rõ nội dung quá –

+0

@DeeMac lớn tìm! Bạn có thể đặt câu trả lời đó vào câu trả lời cho những người khác đang tìm kiếm cùng một thứ như tôi không? Tôi đã có một vài giờ bực mình khi thử các cụm từ tìm kiếm khác nhau và không có gì hữu ích xuất hiện. – Enijar

Trả lời

5

Theo yêu cầu, câu trả lời của bạn nằm trong việc sử dụng -webkit-shape-inside: http://hongkiat.com/blog/css3-content-wrapping

Xác định một polygon với những điểm phù hợp với hình bình hành và nội dung của bạn sẽ phù hợp với hình dạng đó.

MIPO: Để có được 'điểm' về hình dạng của bạn, hãy xuất nó dưới dạng vectơ từ phần mềm thiết kế đồ họa phù hợp và trong SVG sẽ là tọa độ.

+3

Trong khi công trình này, tôi sẽ thêm rằng hiện tại chỉ có hỗ trợ trình duyệt hạn chế cho 'hình bên trong'. – markE

Các vấn đề liên quan