Hello!
Basically, I am trying to create something like that:
Where there is text around an image.
I have found a way to make it from one side of the image, using float etc, but I have not managed to make it for both sides.
Is this something doable?
I don’t see a “proper” was of doing this, while maintaining the natural flow of the text.
The closest thing is the shape-outside property, but it will only wrap to text on one side.
You could break the text into two sides and wrap to a shape in the middle, but it would not be machine readable. Or you could create the effect with absolute positioning, but that would likely not be responsive, though could be in a small element, or have a media query to lose the effect on small screens.
1 Like
I played with this. while ago and the only sensible way I could see was to use 2 columns of text and then split the image into each half using shape outside.
(View at full size on codepen for full effect)
If you wanted the text to read all the way across (rather than up and down in columns) then you’d probably need to do as Sam suggests and duplicate the text and separate into 2 columns and then clip out each half.
2 Likes
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.