CSS Slants??

This trick just leaves me staring.  I thought I was pretty good with CSS, but I have no clue how this one works… What does it do?  Simple:  create slants and shapes in CSS.  As the page says… it’s “slantastic”!!!

This is an older entry and as such, it may be by a guest author or contain formatting problems / extraneous code. If you notice something wrong with the entry, please use the Contact page to let me know the entry title and issue.

Comments

Ok…

a) since when would

class="oneClass anotherClass"

even produce anything other than an error

and

b) what about that combo makes it loop?  And what controls the iterations and prevents it from continuing forever?

a) That’s always been allowed, though few people (myself included) ever take advantage of it.  It just applies more than one style to an element.  I’m pretty sure that if conflicts exist, the priority runs from the first listed to last.

b) Errr… what loop?  If you look at the underlying code all the examples are just <div>s with styles applied to them (usually inline styles).

a) ok, cool, learned something new

b) Ok, like on the small box with the blue triangle--there is only one div, with two classes applied.  In order to make the slant, to me, it seemed like it was drawing each border over and over in an steady increase/decrease in length, and shift of one pixel in area each “iteration.” I guess I’m just confused as to how those combinations of border definitions end up with those results without doing it as a series of dozens of nested div’s, or a for/next loop.

Leave Your Comment