10 ms·
CSS arrow please
- vanwilder77 15y agoLoved the tool !!
- chazandchaz 15y agoHas a small line running through the arrow on safari (mobile). FYR
- philo23 15y agoThat's probably because the CSS pixel resolution isn't matching the device/screen resolution so you're seeing the edge of two elements that don't quite match (imagine a percentage being rounded). If the page included a meta viewport tag with the correct default zoom level there would probably be no line (not tested) until you zoomed in or out.
- Mansyn 15y agoThat is pretty cool, I wonder if there will be other shapes. I can't wait until there's no need for creating small images.
- jenius 15y agoFor those who enjoy sass: =triangle($direction: up, $size: 10px, $color: #000) width: 0 height: 0 @if $direction == up border-left: $size solid transparent border-right: $size solid transparent border-bottom: $size solid $color @else if $direction == down border-left: $size solid transparent border-right: $size solid transparent border-top: $size solid $color @else if $direction == left border-top: $size solid transparent border-bottom: $size solid transparent border-right: $size solid $color @else if $direction == right border-top: $size solid transparent border-bottom: $size solid transparent border-left: $size solid $color
- jacobr 15y agoI normally use SCSS, but this should work as well. =triangle($direction: top, $size: 10px, $color: #000) width: 0 height: 0 border: $size solid transparent border-#{$dir}-color: $color
- diminish 15y agocss, sass and scss rocks. all those ideas should have their place in css3 or later.
- sil3ntmac 15y agoCheck out stylus, it's pretty neat too: http://learnboost.github.com/stylus/docs/js.html http://learnboost.github.com/stylus/docs/js.html My favorite features: - auto-insert vendor prefixes, even IE filters (no need for css3 'mixins', which are most of the mixins the avg dev will need) - can even rasterize linear-gradient backgrounds and serve as image for more pre-css3 browser support. This one I haven't tested but it sounds awesome Edit: paragraph formatting
- jenius 15y agoYeah I actually prefer stylus to sass personally, sass is just more popular (and rails default) and less magical for people that don't work with css as often. My favorite feature actually is that it can grab properties out of parents, as demonstrated here: https://gist.github.com/2563746 https://gist.github.com/2563746
- rralian 15y agoWhile 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 you are applying it to.
- mikegerwitz 15y agoI love the creativity that results from CSS' limitations (or, arguably, its flexibility). Neat trick. It took me a moment to realize exactly what was going on to make this work. For those interested: borders are styled in such a way that they angle toward the edges if the border is large enough: \ / / \ That gives you four "V"s to work with. Therefore, to create the arrow, you simply need to hide all but the appropriate border. The border around the arrow is accomplished by underlaying another "V".
- stuff4ben 15y agoI 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?
- growt 15y agoTake a look at this: http://jtauber.github.com/articles/css-hexagon.html http://jtauber.github.com/articles/css-hexagon.html
- etherealG 15y agothanks, that's a much better explanation
- avgarrison 15y agoThanks, I had no clue how this trick worked until I saw your link.
- septerr 15y agoAwesome~ 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!
- deleted 15y ago[deleted]
- anons2011 15y agoThe demo page is broken in IE8, although it does work when you copy the HTML/CSS to a new file.
- raganwald 15y agoThe demo page is broken in IE8 I prefer to say that “IE8 is broken when attempting to render the demo page,” but either way, good catch.
- tomelders 15y agowrap it up in a cocoa app please, so I can use it when I'm not online.
- prezjordan 15y agoFile -> Save Page As?
- ericax 15y agoArrow is repeated too many times nowadays. Neat.
- Teapot 15y agoI was going to use an CSS tool today, but, then i took an arrow to the knee.
- oe 15y agoThis is the way to do it, until the graphics guy wants the box to have a drop shadow. The pseudo elements' shadow is square, so your options are either to hope that nobody notices that the arrow doesn't have a shadow (like in this example), or to use an image for the arrow.
- kapowaz 15y agoThe gathered troops here were all cooing at this demo until the drop shadow was noticed as absent from the arrow. A real shame (although obviously the box-shadow being bounded by the rectangle makes it impossible to do this way). Maybe it's time to propose a mask-shadow property?
- cfontes 15y agoThis made me to the sky and back to hell in one second. I need to do exactly this in a google maps infobox, BUT with the dawn shadow... :( back to images I guess.
- mcsheffrey 15y agoHere's a method I use for getting box-shadows on the arrow http://tinkerbin.com/cRhPGwmh http://tinkerbin.com/cRhPGwmh
- cfontes 15y agoThanks, but I cannot see the shadow in it.
- shawnc 15y agoYou know, not having a shadow on the Arrow (if arrow is on bottom) kind looks like it's popping off the page then, at a slight angle. I don't mind it - tho obviously not for every use.
- bgarbiak 15y agoHere's a quick hack for a CSS arrow that casts a shadow. http://jsfiddle.net/BKtnn/1/ http://jsfiddle.net/BKtnn/1/ Adding border is a bit problematic but I'm sure solution could be found, just a question of few more minutes. Also, it should be doable in IE with filters.
- rralian 15y agoThat's so funny... just yesterday I built my own sass mixin to create custom triangles to do the little arrow pointer on a dialog box like this. Two triangles (border color and background color) with an offset. I toyed with using :before and/or :after to create the second background-color triangle, but the specs said you could only do text or an image so I didn't even try to make the triangle. My version required something like <div class="arrow arrow-left"><div class="arrow-inner arrow-inner-left"></div></div>. This is so much more semantic, elegant, and awesome. I love it!
- gioele 15y agoI would not call this _more semantic_. It is definitely a very cool and clean hack (more of these on HN, please), but not semantic at all: in the source there is not indication that the box is pointing at something or where it is pointing. Looking at the domain name I thought it was a public request for a new CSS property like p { border-bottom-right-cap: solid-arrow-outward; }
- rralian 15y agoI think it's more semantic than a non-content div or image that has no real semantic content, which is what my solution (and most I've seen) amounted to. I suppose ideally some property on the dialog container like 'data-refersto="#indicatedContent"' would be a little more semantic. And eventually that could be implemented directly in HTML and stylable in CSS. That'd be neat.
- NickLarsen 15y agoThis needs 2 easy additions, a slider to move the arrow closer to either corner of the edge it's on and a slider to change how big the arrow is.
- chrisacky 15y agoI've also just converted to LessCSS mixin. Free for your use. (I added a 6th argument so that you can change the class name that gets generated). Clickable: https://gist.github.com/2644661 https://gist.github.com/2644661 .arrowgasm(@position: top, @size : "4px", @background-color : #88b7d5, @border-width: "2px", @border-color : #c2e1f5, @arrowClass : "arrow_box"){ (~".@{arrowClass}") { position: relative; background: @background-color; border: @size solid @border-color; } (~".@{arrowClass}:after"), (~".@{arrowClass}:before") { bottom: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } (~".@{arrowClass}:after") { .b(@position, @background-color); border-width: @size; left: 50%; margin-left: @size * -1; } (~".@{arrowClass}:before") { .b(@position, @border-color); border-width: @size + @border-width ; left: 50%; margin-left: ( @size + @border-width ) * -1; } .b(top, @border-color) { border-bottom-color: @border-color; } .b(right, @border-color) { border-left-color: @border-color; } .b(bottom, @border-color){ border-top-color: @border-color; } .b(left, @border-color) { border-right-color: @border-color; } }
- scizo 15y agoYou might also want to consider explicitly setting the box-sizing to content-box. I know that is the default, but if someone attempted to use this and had already adjusted the box-sizing to something else it would not work.
- esrauch 15y agoThere are dozens of rules someone could already have on the page that would break it, why make a special case for box-sizing?
- Skalman 15y agoBecause it's not unheard of to set * { box-sizing: border-box; }. In the same way, you shouldn't assume margin, padding or font-size to be anything in particular.
- richardlblair 15y agoI really suck at CSS. I mean, I really suck. It takes me forever to accomplish the smallest things. I love these sites that keep popping up that generate CSS for cool little effects. Thanks!
- kjhughes 15y agoThis and other utility and howto sites are very helpful, agreed. BTW, to hone your CSS skills, try dropping into Firebug or Chrome's developer tools and just playing around -- very easy way to learn and get CSS stuff done. The CSS panel lets you change rules and values and see the effects immediately. I know in Chrome I use the up/down arrows on a value to slide objects and spacing around on the screen regularly. The panel also helps greatly in understanding cascading; see also the "computed styles" section.
- freditup 15y agoYup, I suck at CSS too. I still think there's something fundamentally wrong with it, but that's probably more a marker on my own ignorance than anything. Anyway, I do have fun playing around with the FF style tools. It is quite cool and informative.
- richardlblair 15y agoI personally don't have an issue with CSS. The issue for me is the inconsistent implementations across browsers. That has been my real pain point, and it continues to keep me away from really learning CSS.
- freditup 15y agoIt just seems like there could be a simpler system to me. (Simpler in terms of properties and such, as opposed to syntax. Also, variables and stuff in CSS would be nice obviously). But I agree, inconsistency is always frustrating.
- davegauer 15y ago
- dlikhten 15y agoMay I request that the arrow has a drop shadow too. I mean this is not exactly rocket science, but the drop shadow will be much tougher.
- optymizer 15y agoBecause the shadow seems to be setup so that the light source is at the top, when you move the arrow to any other position, the lack of shadow under the arrow becomes noticeable. If the light source moved along with the triangle, no shadow under the arrow would be required (imo).
- yanis 15y agohttp://news.ycombinator.com/item?id=3948850 http://news.ycombinator.com/item?id=3948850
- bratsche 15y agoI posted a Sass mixin for doing this here: https://gist.github.com/2645575 https://gist.github.com/2645575
- blakeperdue 15y agoBrowser support? Any idea if this works in IE7/8?
- Timmy_C 15y agoNo IE7/8 support because it doesn't do CSS generated content or the :before and :after pseudo-elements.
- testify 15y agoThank you sir! This might come in handy sometimes.
- PStamatiou 15y agoThe harder thing is getting the boxshadow to work on that.
- jarek-foksa 15y agoI'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.
- suyash 15y agowaste 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)
- jreeve 15y agoNot 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.
- jqueryin 15y agoThis is great so long as you don't still have to support IE7. http://css-tricks.com/browser-support-pseudo-elements/ http://css-tricks.com/browser-support-pseudo-elements/
- TazeTSchnitzel 15y agoIn IE7 you'd just have a box without the triangle, no? Isn't that graceful degradation?
- GFischer 15y agoNope, 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.
- benguild 15y agoFinally.
- necolas 15y agoI made a bunch of this kind (and more complex) speech bubbles a couple of years ago: http://nicolasgallagher.com/pure-css-speech-bubbles/demo/ http://nicolasgallagher.com/pure-css-speech-bubbles/demo/ This is a nice little tool to help automate the production of the code for simple ones.
- RoryH 15y agoBrilliant, I have a use case for this, nice timing :-)