91–100 of 107 posts
Earlier quoted context omitted.
I'm racking my brain trying to see the 8 directions. I only see 4: up, down, left & right. Care to explain the other 4?
Got it from here: http://apps.eky.hk/css-triangle-generator/ Here's a series of examples showing how it works (not a fun animation like the OP, but a little easier to follow): http://jsfiddle.net/X8gXS/ Basically, you can get any triangle as long as at least one of the sides is horizontal or vertical.
Earlier quoted context omitted.
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?
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?
Earlier quoted context omitted.
Actually I'd use SVG for that, it's even trivial to write: Should be supported pretty much everywhere canvas is, but without the need of scripting to actually get a triangle.
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...
.triangle {
background: url("data:image/svg+xml;charset=utf-8,") no-repeat left center;
width: 20px;
height: 10px;
}Earlier quoted context omitted.
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.
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.
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.
Isn't it kinda degrading that while designing CSS no-one came up with the idea that people would like to have a triangle from time to time?
Earlier quoted context omitted.
Um, it works. It even works following the rules that have been in place for years. Why would you have to "fix" it?
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 comple…
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.
Earlier quoted context omitted.
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...
More obvious if you use a polygon rather than a path object: And you can put it in your CSS using a data URI: .triangle { background: url("data:image/svg+xml;charset=utf-8, ") no-repeat left center; width: 20px; height: 10px; }
Earlier quoted context omitted.
SVG has `symbol` and `use` for reusing stuff: http://www.w3.org/TR/SVG/struct.html#SymbolElement
I 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.
You declare a symbol in the defs section of an SVG image and you can instantiate it with use. E.g.
Earlier quoted context omitted.
Actually I'd use SVG for that, it's even trivial to write: Should be supported pretty much everywhere canvas is, but without the need of scripting to actually get a triangle.
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...
?Earlier quoted context omitted.
More obvious if you use a polygon rather than a path object: And you can put it in your CSS using a data URI: .triangle { background: url("data:image/svg+xml;charset=utf-8, ") no-repeat left center; width: 20px; height: 10px; }
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.