Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Animation to Explain CSS Triangles

codepen.io

Post reply on HN
Print view View original

71–80 of 107 posts

Re: Animation to Explain CSS Triangles

#71

Post by jeremiep »

chavesn wrote: post #47
annnnd wrote: post #43

Earlier quoted context omitted.

Sure 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!

Well, 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.

Could always do Hello where the div has position: relative and the span has position: absolute. Should work everywhere too.

Re: Animation to Explain CSS Triangles

#72

Post by talmand »

babby wrote: post #50
icambron wrote: post #40

Earlier quoted context omitted.

I envy you, then, 'cause I freaking hate it. SASS and LESS provide really nice language improvements, but they don't fix all the crap about box models and positioning and polyfills and byzantine precedence rules and the necessity for silly hacks like this. It's just too complicated and painful to make things look the way you want them to look, which is the point of CSS. I've gotten pretty good at it and I've come to…

I'm with you. Anyone who says CSS is A-OK doesnt understand it fully or doesnt have the imagination for something better to replace it. It's really the most shite language I've ever had to deal with. That's the thing though, we have to deal with it. I don't get why there isn't just a complete replacement trending on HN every other month. Sure, it needs browser support and it would forgo a lot of the CSS-specific opti…

I think CSS is A-OK and I believe I understand it fully as I've been using it for most of my career. Most of its "problems" are rooted in bad implementations in browsers or people trying to use it for things it wasn't designed for, not in the spec itself.

But maybe I think this because I don't view it as a language, to me it's more of a configuration file that holds sets of instructions. It's getting closer to a proper language though.

You can have your opinion I suppose, but nearly every web tech I've worked with over the years has had its transitions from good to bad to hated only to end up somehow good again.

Re: Animation to Explain CSS Triangles

#73

Post by ozh »

michaelbuddy wrote: post #66
ozh wrote: post #51

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.

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.

Except 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.

Re: Animation to Explain CSS Triangles

#74

Post by psychometry »

artursapek wrote: post #11
kmm wrote: post #9

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.

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.

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.

Re: Animation to Explain CSS Triangles

#75

Post by talmand »

solistice wrote: post #20
babby wrote: post #17

Earlier quoted context omitted.

Why 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.

I'm currently learning CSS, and it really all seems like dirty hacks to me. margin: o auto;? So I can't tell this to just horizontally center itself automatically? Don't get me wrong, I love dirty hacks, just not if they're forced onto me. I guess in a couple of weeks stockholm syndrome will set in, and I'll love it, but for the beginner, especially if you're moving there from either design (What, I need to hack thin…

Well, margin: auto is how you center things horizontally. What? You want something like align: center instead? Well, that's just semantics. It's a legacy issue built on extending instead of improving.

Here's a fun one, make a div display: inline-block and then use text-align: center on its parent. Why the hell does the div center when the rule is for text? Is it badly implemented or is it badly named? Without reading the actual spec it's a mystery.

I use CSS extensively nearly every day. I learned CSS before IE6 existed. You don't like dirty hacks? I've likely forgotten more dirty hacks then you'll ever be required to know about. Compared to how things started, CSS is a godsend to us today. But I'm not going to yell to you to get off my lawn, because the fun has only just started and you should feel free to join in.

The problems you listed that you have with CSS, you do realize that's mostly because of how browsers implemented CSS and some related technologies right? CSS isn't a dirty pimp, he's actually the guy down the street that knows all about fashion and design but everybody keeps wanting him to build cars.

Re: Animation to Explain CSS Triangles

#76

Post by talmand »

michaelbuddy wrote: post #66
ozh wrote: post #51

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.

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.

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

Re: Animation to Explain CSS Triangles

#77

Post by tinco »

psychometry wrote: post #74
artursapek wrote: post #11

Earlier quoted context omitted.

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.

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.

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).

Re: Animation to Explain CSS Triangles

#78

Post by lambda »

psychometry wrote: post #74
artursapek wrote: post #11

Earlier quoted context omitted.

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.

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.

You can write SVG by hand and embed it in HTML. This requires no use of an external editor nor any extra HTTP request.
If you want to include it in your CSS, you can include it via a data URI, though you need to embed it as an actual XML document (within an HTML document, you can skip the namespace and use HTML syntax which doesn't require quotes around attributes) and can't include line breaks so the syntax is a little bit more cumbersome:

  .triangle {
      background: url("data:image/svg+xml;charset=utf-8,") no-repeat left center;
      width: 20px;
      height: 10px;
  }
Examples of both in action: http://jsfiddle.net/jtR4G/

Re: Animation to Explain CSS Triangles

#79

Post by [deleted] »

JungleGymSam wrote: post #21

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.

[deleted]

Re: Animation to Explain CSS Triangles

#80

Post by viggity »

tinco wrote: post #77
psychometry wrote: post #74

Earlier quoted context omitted.

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.

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).

not all browsers support SVG (namely IE8). for folks who have to support LOB, this is still an issue.
Post reply on HN