10 ms·
Animation to Explain CSS Triangles
- cstrat 13y agoVery cool! I always knew how it worked but it was nice to see the animation play out.
- periferral 13y agoI had no idea. Thanks for the very cool animation/explanation. A+
- karam 13y agoSweet. Thanks for making this. It'd be awesome if you could extend the animation and show examples of complex shapes you could make with triangles.
- aaronem 13y agoIt'd be even more awesome if you could actually make complex shapes with these triangles.
- svachalek 13y agoYou can. It just requires absolute positioning. I can't see why you'd want to though, it's not hard enough to be fun or useful enough to be work.
- mbq 13y agoAnd if you try this, you will usually get light segments in places where triangles forming some shape meet (due to antialiasing and overall hackery).
- sprokolopolis 13y agoI always sort of wondered about this, but I never got around to investigating it. Thanks for the lesson.
- joeheyming 13y agoI wish all CSS was described this way... Thanks!
- silveira 13y agoI'm the only one here that although thinks it is a cool presentation fells sad about how a triangle needs to be described as a very broken rectangle?
- donutdan4114 13y agoA lot about CSS is sad.
- guynamedloren 13y agoI disagree. It would be sad if a triangle couldn't be created in CSS at all. In fact, I think it's awesome that a triangle can be created from a "very broken rectangle", along with many other hacks that make this simple language quite powerful.
- crazygringo 13y agoI really hope you're being sarcastic. Sometimes these things have a way of whooshing over my head...
- babby 13y agoWhy would he be when it's mostly cross-browser? It means you dont need to draw the triangle and throw it into a .png or your sprite then deal with all that crap. You have a triangle that you can use to point at things AND you can modify the borders to change the size of that triangle on the fly. Yay.
- kmm 13y agoI'm sorry, I have very little experience with web design, but is this the supposed way to create a triangle? It seems weird there would be no way to build shapes with primitives.
- camus 13y agoIt's just a hack. If you want to create a triangle you'll either draw it on a CANVAS or use SVG. You just cant for instance, put a text in a triangle easily with CSS today(at least in a cross-browser way).
- annnnd 13y agoSure you can - you just write it in another DIV, positioned above your triangle. Or did I misunderstand you? The beauty for me is not in the hack itself though, it is in the way it is presented - I adore the simplicity of this approach. Kudos!
- chavesn 13y agoWell, then the text isn't really "in" the triangle, is it? Leading you to rely on further hacks to make sure the text stays in the triangle with a nice padding, correct wrapping, and all the other features you get when text is really inside a container.
- jeremiep 13y agoCould always do <div class="triangle"><span>Hello</span></div> where the div has position: relative and the span has position: absolute. Should work everywhere too.
- chavesn 13y agoYes, that's how you'd get a box to appear over the triangle, but it doesn't really solve any of the containment issues. Example: http://jsfiddle.net/9pMJS/ http://jsfiddle.net/9pMJS/
- zerovox 13y agoDoes this mean if you create a 100px high triangle, it has 100px of invisible padding on top?
- ajr44 13y agoNo. If you take the example animation, you can set border-left-color and border-right-color to transparent, and set border-top-width to 0. This will place the triangle in a bounding box of the correct width and height.
- twanlass 13y agoAhhh the hatin' HN crowd. For what it's worth - I've built this bit of CSS over and over but seeing so uniquely presented was great. Thanks for that.
- babby 13y agoNote: You only need to specify 3 borders. Eg. a triangle pointing down: .triangle-down { border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid #444; }
- deleted 13y ago[deleted]
- ender7 13y agowidth and height are automatically 0 if the element is inline (i.e. a span) or absolutely positionrf (which is usually true for these kinds of triangles)
- user-id 13y agoA little more concise: .triangle-down { border: 1em solid transparent; border-top-color: #444; }
- JungleGymSam 13y agoI vote we change the name from CSS to PWL. PWL is, of course, Puzzle Web Language. This is what I hate about CSS: it's a jigsaw puzzle that must be brute-forced. The fact that this exists and is lauded as clever rather than being ridiculed for its opaqueness really gets my goat.
- jabo 13y agoThe reason this is clever is because CSS wasn't intended to be used to draw shapes. You would use HTML5's canvas element to do that. Instead this shows how you can hack a simple border property to make a DOM element look like a triangle.
- ygra 13y agoActually I'd use SVG for that, it's even trivial to write: <svg width='20' height='10'> <path fill='#D94948' d='M0,20h20L10,0'/> </svg> Should be supported pretty much everywhere canvas is, but without the need of scripting to actually get a triangle.
- Sharlin 13y agoBut that's hardly reusable. You'll have to copypaste the (completely nonobvious) markup everywhere you want a triangle. Although it might be possible to use the CSS :before pseudo-element...
- mbq 13y agoSVG has `symbol` and `use` for reusing stuff: http://www.w3.org/TR/SVG/struct.html#SymbolElement http://www.w3.org/TR/SVG/struct.html#SymbolElement
- matthuggins 13y agoI can't stand the w3 docs sometimes. After reading that section about `symbol`, I still have no clue what it is or how to use it.
- javajosh 13y agoMan, this is a powerful teaching technique - I knew all this, but I don't think I really really understood it until just now. I hope more people start writing animated explanations for web stuff. Maybe someone could do one for CSS menu systems or side bar, sticky footer, type stuff. Or even the Bootstrap grid system.
- scottcanoni 13y agoNow animate this using a border with an inner color like this: http://cssarrowplease.com/ http://cssarrowplease.com/
- Kartificial 13y agoThat's essentially doing the same trick twice, only with a slightly larger version that matches the border color of the box and is positioned behind the smaller triangle.
- rimantas 13y agoReminded me of good old one: http://www.designdetector.com/tips/3DBorderDemo2.html http://www.designdetector.com/tips/3DBorderDemo2.html For other cool abuse of CSS see http://cssdeck.com/labs/creating-single-element-iphone-using-css3 http://cssdeck.com/labs/creating-single-element-iphone-using...
- Theriac25 13y agoSomehow I'm tempted to click the "report abuse" button.
- jimmcslim 13y agoAt YOW Australia 2012, Brian Beckman and Erik Meijer gave an entertaining presentation about 'The Story of the Teapot in HTML'. I thought it was going to culminate in a 3d animation of a teapot in a browser using Javascript and CSS triangles, but they didn't get that far. Anyway, here's a link to the video: http://yow.eventer.com/yow-2012-1012/the-story-of-the-teapot-in-html-by-brian-beckman-and-erik-meijer-1266 http://yow.eventer.com/yow-2012-1012/the-story-of-the-teapot...
- est 13y agoThis trick is as old as the dHTML. Adding some triangulation algorithms you have a fun 3D ending engine.
- ozh 13y agoDesigner: "wow this is cool" HN reader who's not a designer: "don't like, bleh CSS, should SVG, used to do that in VIM, TIMTOWTDI" and other similar useless rants missing the point.
- michaelbuddy 13y agothe problem is people seeing and sharing this, thereby giving it some sort of authority. It's possible and still a dumb idea. Yet another thing front end coders have to encounter and fix after somebody else applies these kinds of embarrassing hacks.
- ozh 13y agoExcept there's nothing to "fix". That's one way to do triangle in CSS, it's not better or worse than another one, and it's been known for ages. The cool thing here is the visualization, not the technique itself.
- talmand 13y agoUm, it works. It even works following the rules that have been in place for years. Why would you have to "fix" it?
- michaelbuddy 13y agoIs this a hack? Yes. Hacks are replaced by standardized and better approaches (especially when better approaches are available now. "Fixing" this means removing it in code in place of a more logical approach. Where a triangle is really a triangle, not a rectangle with no dimension. Part of web work is knowing immediately what you're dealing with. dimensionless rectangles that show up as triangles is a layer of complexity (hack) that disrupts flow. Get it?
- talmand 13y agoWell crap, I guess I just don't get it. I suppose I'll understand once I realize what you mean by "fixing" is actually "replacing". Specifically with your preferred method of accomplishing the same thing. You aren't one of those programmers that can't help themselves in "fixing" everybody else's code that comes across your desk because they didn't do it the way you would, regardless of whether it works or not? I mean, the attitude I'm sensing in your text suggests that, but I'm sure you're a better person than that in real life.
- GoldfishCRM 13y agoSimple, elegant and to the point. Give me more stuff like this.
- gp- 13y ago▼ ◀ ▶ ▲ Some more - http://www.fileformat.info/info/unicode/block/geometric_shapes/list.htm http://www.fileformat.info/info/unicode/block/geometric_shap...
- gulbrandr 13y agohttp://copypastecharacter.com/graphic-shapes http://copypastecharacter.com/graphic-shapes Better site for this, IMO.
- dingdingdang 13y agoHonestly, why is there no basic web drawing app out there that exports to CSS? Should be doable and hence done.
- r0muald 13y agoSo do it.
- dsego 13y agoSomething even better - http://www.kickstarter.com/projects/macaw/macaw-the-code-savvy-web-design-tool http://www.kickstarter.com/projects/macaw/macaw-the-code-sav...
- alanctgardner2 13y ago> Should be doable and hence done. OK, that's it everybody. Trying to do something? Is it done yet? Nope? Pack it in. All the things have been done.
- kamakazizuru 13y agoI find it depressing how most of CSS related drawing is basically all just hacks. I saw the same a few weeks ago when someone posted a bunch of different CSS shapes - the code behind it was the most unintuitive stuff. It's like saying - here's a bicycle - now lets get another one and weld it together in some ugly way and make a car out of it. I dont understand why CSS / Browsers have not come far enough to natively support basic shapes? Surely if we can make self-driving cars - rendering things in browsers should be simpler? (yes I am aware of SVG & Canvas - but they dont work everywhere - dont get why the good folks at google , ms & mozilla cant get together and agree that the web shouldnt be full of ugly hacks masquerading as stylesheets).
- alanctgardner2 13y agoThere shouldn't be any CSS-related drawing. Full-stop. Your analogy is accidentally very accurate, because it's like looking at a car, then a pile of bicycles, and saying "how can I get from A to B". The sane person would go to an auto parts store, get the appropriate parts and build a car as we understand it. The madman would weld two bicycles together, and then complain that it wasn't intuitive to do - bicycles aren't supposed to be used for creating cars. Likewise, CSS is not for drawing shapes: it's for styling things. As you pointed out, we have canvas and SVG for drawing, plus images for things like icons. As for the compatibility thing, you're coming at it the wrong way. Don't tell Google et al. to support yet another standard for CSS shapes. Let them spend their time implementing SVG and Canvas according to the existing spec. Inventing a new spec not only doesn't solve the problem, it actually re-introduces it.
- kamakazizuru 13y ago1) I never mentioned a new spec. 2) " bicycles aren't supposed to be used for creating cars. " - exactly my point. I think we said the same stuff - came at it from slightly different angles. I´m not advocating yet another standard. Im saying - lets make it easy enough to use the appropriate (and already existing) standards to draw - rather than be at the mercy of a seemingly prehistoric styling system. My point with google et al was - get together and agree to a way to do simple things like images - the same way across browsers. Does that help clarify?