I’m trying to come up with a clean way to have two divs meet at opposite angles… kinda like a miter joint.
Here is a codepen with an example:
If its just a single line of text then you can use clip-path to cut the area out.
e.g.
However if you have multi lines of text and want to keep the same angle then it becomes very awkward as you would have to offset the content due to the lack of room. Maybe something like clip-path and shape outside but it might start to get complex very quickly. 
3 Likes
Just for fun I’ve tried using an SVG to get the slant:
Setting stroke-width to zero did not work as expected (default is 1px).
Row height is controlled by SVG height (SVG height must be at least text line height).
Care would be needed for small screen widths.
2 Likes
Very good
Here’s another one ‘Just for fun’ (as the original poster seems to have vanished) and uses a linear gradient to create the slant.
Once again there would be a need to control the width or content will overflow.
2 Likes
I was bored so tried to add shape-outside to slant the text as well.
(View on codepen for large screen effect)
It’s quite a bit ‘magic numberish’ and has to be contained within width limits but seems workable for short phrases.
2 Likes
took me awhile to get back to this project… Thanks Paul & Archibald!!! you both always seem to come to my rescue
2 Likes
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.