Page 1 of 1

Angled Paragraph Edge

Posted: Wed Jul 07, 2010 1:11 pm
by Jonah Bron
Can you make an angled paragraph edge with CSS? Example attached, stylishly reproduced with gEdit.

Thanks.

Re: Angled Paragraph Edge

Posted: Wed Jul 07, 2010 1:37 pm
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

Re: Angled Paragraph Edge

Posted: Wed Jul 07, 2010 2:26 pm
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);​

Re: Angled Paragraph Edge

Posted: Wed Jul 07, 2010 9:01 pm
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: