
Animation to Explain CSS Triangles - grinnick
http://codepen.io/chriscoyier/full/lotjh
======
javajosh
Man, 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.

------
kmm
I'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.

~~~
artursapek
It's the only way to do it with pure CSS. A more sane approach would be to use
a raster or vector image. It is pretty silly.

~~~
psychometry
No, having to open an image editor to create a simple shape you can make in
CSS is silly. So is an additional, unnecessary HTTP request.

~~~
tinco
No, making a shape in CSS is silly. CSS is for styling not drawing.

If you want to make a triangle, without an additional (unnecessary) HTTP
request, you should use the appropriate web tech which is SVG.

Just like all other resources you can easily embed an SVG in your HTML if
you're being stingy on the requests (which is a good thing).

~~~
viggity
not all browsers support SVG (namely IE8). for folks who have to support LOB,
this is still an issue.

~~~
ryanbrunner
On the other hand, callout arrows seem like a perfectly good case of something
that doesn't necessarily need to be present for the site to function.

If your compatibility goals are pixel-perfect compatibility with IE8, this is
an issue (and my thoughts and prayers are with you), but if your site simply
needs to be functional, callout triangles wouldn't be on my top 10 things to
worry about.

------
JungleGymSam
I 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
The 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
Actually 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
But 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...

~~~
lambda
More obvious if you use a polygon rather than a path object:

    
    
      <svg height=10 width=20>
          <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
      </svg>
    

And you can put it in your CSS using a data URI:

    
    
      .triangle {
          background: url("data:image/svg+xml;charset=utf-8,<svg height='10' width='20' xmlns='http://www.w3.org/2000/svg'><polygon fill='red' stroke-width='0' points='0,10 20,10 10,0' /></svg>") no-repeat left center;
          width: 20px;
          height: 10px;
      }

~~~
ygra
I'm more comfortable with the path syntax, and polygons are pretty much the
same as a path, except that you would prepend M and append z to the list of
points (for certain buggy renderers it might be necessary to put an L inside,
too). Paths have handy shorthands for horizontal, vertical and relative
movement, though.

~~~
lambda
If you're more comfortable with it, that's great. To someone who's not already
comfortable with it, points="0,10 20,10 10,0" is a lot more obvious than
d='M0,20h20L10,0'

------
gp-
▼ ◀ ▶ ▲

Some more -
[http://www.fileformat.info/info/unicode/block/geometric_shap...](http://www.fileformat.info/info/unicode/block/geometric_shapes/list.htm)

~~~
gulbrandr
[http://copypastecharacter.com/graphic-
shapes](http://copypastecharacter.com/graphic-shapes)

Better site for this, IMO.

------
silveira
I'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
A lot about CSS is sad.

~~~
jabo
A lot about CSS is sad indeed. But this demo actually does a good job of
explaining a common CSS hack.

------
babby
Note: 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;
      }

~~~
user-id
A little more concise:

    
    
      .triangle-down {
        border: 1em solid transparent;
        border-top-color: #444;
      }

------
jimmcslim
At 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...](http://yow.eventer.com/yow-2012-1012/the-story-of-the-
teapot-in-html-by-brian-beckman-and-erik-meijer-1266)

~~~
est
This trick is as old as the dHTML. Adding some triangulation algorithms you
have a fun 3D ending engine.

------
twanlass
Ahhh 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.

------
scottcanoni
Now animate this using a border with an inner color like this:

[http://cssarrowplease.com/](http://cssarrowplease.com/)

~~~
Kartificial
That'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.

------
kamakazizuru
I 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
There 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
1) 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?

------
karam
Sweet. 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
It'd be even more awesome if you could actually make complex shapes with these
triangles.

~~~
svachalek
You 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
And if you try this, you will usually get light segments in places where
triangles forming some shape meet (due to antialiasing and overall hackery).

------
rimantas
Reminded 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...](http://cssdeck.com/labs/creating-single-element-
iphone-using-css3)

------
joeheyming
I wish all CSS was described this way... Thanks!

------
cstrat
Very cool!

I always knew how it worked but it was nice to see the animation play out.

------
Theriac25
Somehow I'm tempted to click the "report abuse" button.

------
periferral
I had no idea. Thanks for the very cool animation/explanation. A+

------
dingdingdang
Honestly, why is there no basic web drawing app out there that exports to CSS?
Should be doable and hence done.

~~~
dsego
Something even better - [http://www.kickstarter.com/projects/macaw/macaw-the-
code-sav...](http://www.kickstarter.com/projects/macaw/macaw-the-code-savvy-
web-design-tool)

------
sprokolopolis
I always sort of wondered about this, but I never got around to investigating
it. Thanks for the lesson.

------
zerovox
Does this mean if you create a 100px high triangle, it has 100px of invisible
padding on top?

~~~
ajr44
No. 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.

------
GoldfishCRM
Simple, elegant and to the point. Give me more stuff like this.

------
ozh
Designer: _" 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
the 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.

~~~
talmand
Um, it works. It even works following the rules that have been in place for
years. Why would you have to "fix" it?

~~~
michaelbuddy
Is 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
Well 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.

~~~
michaelbuddy
"fixing everybody else's code that comes across your desk because they didn't
do it the way you would"

that's the real world of design and collaborative environments. Branding, code
quality, standards they all start with setting a direction that makes sense in
order to improve efficiency across multiple disciplines and experience levels.

Hackey fixes have always been available. Instead of using h3 tags you can use
b tags and scale them up to a particular font size.

Even when something works, you have collaboration and reputation to operate
by. Case in point: Somebody actually had to create an animation to explain
what the hell is going on with this hack to people who already know html and
css, whereas with a unicode character or SVG you wouldn't have to have meta
instructions. You could say good code or technique often requires no
explanation.

that's what I'm trying to get it.

