The harder thing is getting the boxshadow to work on that.
CSS arrow please
51–60 of 76 posts
Re: CSS arrow please
#52I've been writing CSS for a couple of years now and it took me like 10 minutes to understand why this is even working.
I already feel sorry for anyone that will be debugging this mess.
Re: CSS arrow please
#53Earlier quoted context omitted.
While that's cool, it's not quite what the OP achieves. Using this mixin will turn whatever you apply it to into a solid-color triangle with the passed-in options. The triangle will need to be its own element. OP adds two triangles to whatever it is applied to, one for the border color, another to cover it up with the background color. And it doesn't require any additional elements... it just adds these to whatever y…
You're totally right. I have a mixin that makes a bubble like that too, but it's built from a few different mixins that each build on each other and I didn't want to post a buttload of code in a comment. You can see an example of how mine looks if you hit this page ( http://roots.carrotbeta.com/docs/ ) and scroll down to the UI section
That's a pretty groovy framework, thanks for sharing. Nice work.
Re: CSS arrow please
#54waste of a domain name, why do people create a whole new domain name for something as simple as this, this could have easily been a blog post! (IMO)
Re: CSS arrow please
#55waste of a domain name, why do people create a whole new domain name for something as simple as this, this could have easily been a blog post! (IMO)
Not that I have anything to do with it, but two issues come to mind immediately: it may be easier to get organic search traffic for the idea, and it is a good way of keeping projects nice and separate.
Re: CSS arrow please
#56This is great so long as you don't still have to support IE7.
Re: CSS arrow please
#57This is great so long as you don't still have to support IE7. http://css-tricks.com/browser-support-pseudo-elements/
In IE7 you'd just have a box without the triangle, no? Isn't that graceful degradation?
Re: CSS arrow please
#58This is great so long as you don't still have to support IE7. http://css-tricks.com/browser-support-pseudo-elements/
In IE7 you'd just have a box without the triangle, no? Isn't that graceful degradation?
Nope, you don't have a box at all (at least on this webpage). Nor the left-side box.
It looks awful on IE7 actually, the footer also degrades un-gracefully.
Re: CSS arrow please
#59Earlier quoted context omitted.
I still don't get it. What do you mean that "borders are styled in such a way that they angle toward the edges if the border is large enough"? What causes the angle?
Take a look at this: http://jtauber.github.com/articles/css-hexagon.html
Awesome~ Thank you for posting this link. I had understood the use of wide solid borders with a 0 height and width div, but how the angle was being achieved was perplexing. I was imagining borders as solid rectangles that overlap each other at the corners. This has been a revelation! I have discovered an awesome new power. Thanks!