Angled Paragraph Edge

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
User avatar
Jonah Bron
DevNet Master
Posts: 2764
Joined: Thu Mar 15, 2007 6:28 pm
Location: Redding, California

Angled Paragraph Edge

Post by Jonah Bron »

Can you make an angled paragraph edge with CSS? Example attached, stylishly reproduced with gEdit.

Thanks.
Attachments
Screenshot-1.png
Screenshot-1.png (44.69 KiB) Viewed 1439 times
User avatar
Jonah Bron
DevNet Master
Posts: 2764
Joined: Thu Mar 15, 2007 6:28 pm
Location: Redding, California

Re: Angled Paragraph Edge

Post by Jonah Bron »

Been doing some testing, and the closest I've come is to cut off the text with an ugly hack-ish. Not good enough.

http://nucleussystems.com/files/angle_text_1.html
User avatar
Weirdan
Moderator
Posts: 5978
Joined: Mon Nov 03, 2003 6:13 pm
Location: Odessa, Ukraine

Re: Angled Paragraph Edge

Post by Weirdan »

Something like this could work (it does actually wrap text, unlike your solution):

Code: Select all

(function($) {
    $(function() {
        $('div.angled').each(function(_, d) {
            d = $(d);
            var l = Math.min(d.width(), d.height());
            for (var i = 1; i <= l; ++i) {
                $('<div style="width: ' + (i) + 'px; height:1px; float: right;clear:right;"></div>').prependTo(d);
            }
        });
    });
})(jQuery);​
User avatar
Jonah Bron
DevNet Master
Posts: 2764
Joined: Thu Mar 15, 2007 6:28 pm
Location: Redding, California

Re: Angled Paragraph Edge

Post by Jonah Bron »

Thanks a lot Weirdan. I'll take this opportunity to dig through the jQuery Docs and translate that into english :lol:

Time for a new vendor-prefixed css property? :wink:
Post Reply