7 ms·

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 shape

by kmm 13y ago

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.

camus 13y ago
It'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 ago
  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!
  - chavesn 13y ago
    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.
    - jeremiep 13y ago
      Could 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 ago
        Yes, 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/
  - gren 13y ago
    Usually I use a :after or :before for the triangle. #box { position: relative } #box:after {position: absolute; top: -10px; left: 45%; ... }
artursapek 13y ago
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.
- ux-app 13y ago
  It is a bit insane, however this allows you to change the color, dimensions, transparency at runtime. A raster doesn't allow you to do this, and, while SVG is scriptable, browser support is spotty. This hack on the other hand will work in every browser all the way back to Netscape Navigator or earlier.
  - michaelbuddy 13y ago
    Better to use Arial unicode characters like &#x25B2 or &#x25BC ASCII encodings and UTF-8 More logical and you can apply all the text styling like color, shadows, skewing, rotate, jquery prepends etc. Put it inside a div and it can go it wherever you want. And it wouldn't be a hack. Some hacks are awesome.. and others are nice playful things but not to be taken with any kind of serious inquiry.
    - kalleboo 13y ago
      Positioning that accurately would be a massive nightmare due to font rendering differences between OSes and browsers.
      - psychometry 13y ago
        I've found that right combination of display: inline-block, position: relative, positioning and margins will get it where you need every time.
        cheald 13y ago
        What happens when a user agent overrides your preferred font size?
dsego 13y ago
But you don't need triangles, they're not semantic, just ask W3C.
- gcb0 13y ago
  Touche. The sooner people realize the web is a presentation thing the sooner we can get our sanity back. sadly, we will see some dozen iterations of 'flash' until that day finally comes. and html5 js shenanigans are only the third...
  - phaer 13y ago
    ...and all those impaired people and people with old and slow devices are finally locked out of our new shiny "sane" web. The web isn't just one visual presentation layer, its a multitude of presentation layers for all kind of people and that demands some compromise.
    - dsego 13y ago
      That seems like a false dichotomy. Why should a nice graphic layer immediately exclude everything else?
      - phaer 13y ago
        It is not, if you frame it like that. But my parent claimed implicitly that the w3c needs to see the web as a pure presentational layer. I have nothing against graphical layers, but a semantic web should stay priority #1 if you ask me. Also: A lot of the shiny new web apps developed during the last few years are unusable with screen readers and/or on low end devices. As long as we can have graceful degradation, i have nothing against more graphical aspects.
    - gcb0 13y ago
      riiight. because the current solution of listening to a webapp via jaws is perfect. They get all the content, which only appears in the end of animations during that nifty scrolling effect. Everyone that needs accessibility is already screwed with regular web presentation hacks. And having to add more presentation hacks to get the presentation right only screw them more. Accepting the web is a presentation, the effort a few sites do to add accessibility to the hacks could be spent adding micro formats to the page content or something, benefiting blinds and people just wanting a easier way to get the content. There are several solutions to problems. And the current state of accessibility on the web is not a prime example of a good one.
scotty79 13y ago
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?
- ygra 13y ago
  Back then there were images for that; later there was SVG. Triangles with CSS don't actually solve a problem CSS intended to solve.
  - scotty79 13y ago
    Back then there were images for borders and even images for padding. CSS solved that. If you add borders why can't you add triangles as well? SVG would be awesome if it could be freely intermixed with HTML. I think I'd ditch HTML for everything other than text boxes and forms.
    - ygra 13y ago
      I haven't seen border images in the wild since CSS added them, I think (apart from examples). Perhaps that was solving a 1998 use-case in 2008. Nevertheless, CSS is still based on styling runs of text and boxes of content. Boxes usually aren't triangular. As for HTML in SVG, there is foreignObject [4.72], but browser support is spotty in places. And wrapping text in arbitrary shapes is on the roadmap for SVG 2, if I remember correctly. But we'll be a bit older when that's universally implemented ;-) [4.72] https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject https://developer.mozilla.org/en-US/docs/Web/SVG/Element/for...
      - drifkin 13y ago
        Border images are great for making resizable buttons. I've used them often in places where support is guaranteed (e.g., Chrome extensions).
    - welly 13y ago
      Where does it stop though? Should CSS provide solutions for polygons too? I think borders are a legitimate styling issue that CSS rightly solves, if only for styling tables. I'm not sure that it's CSS's job to create shapes as well - that, in my mind, is definitely the role of images or SVG.

by kmm 13y ago

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.

camus 13y ago

It'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 ago
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!
- chavesn 13y ago
  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.
  - jeremiep 13y ago
    Could 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 ago
      Yes, 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/
- gren 13y ago
  Usually I use a :after or :before for the triangle. #box { position: relative } #box:after {position: absolute; top: -10px; left: 45%; ... }

artursapek 13y ago

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.

ux-app 13y ago
It is a bit insane, however this allows you to change the color, dimensions, transparency at runtime. A raster doesn't allow you to do this, and, while SVG is scriptable, browser support is spotty. This hack on the other hand will work in every browser all the way back to Netscape Navigator or earlier.
- michaelbuddy 13y ago
  Better to use Arial unicode characters like &#x25B2 or &#x25BC ASCII encodings and UTF-8 More logical and you can apply all the text styling like color, shadows, skewing, rotate, jquery prepends etc. Put it inside a div and it can go it wherever you want. And it wouldn't be a hack. Some hacks are awesome.. and others are nice playful things but not to be taken with any kind of serious inquiry.
  - kalleboo 13y ago
    Positioning that accurately would be a massive nightmare due to font rendering differences between OSes and browsers.
    - psychometry 13y ago
      I've found that right combination of display: inline-block, position: relative, positioning and margins will get it where you need every time.
      - cheald 13y ago
        What happens when a user agent overrides your preferred font size?

dsego 13y ago

But you don't need triangles, they're not semantic, just ask W3C.

gcb0 13y ago
Touche. The sooner people realize the web is a presentation thing the sooner we can get our sanity back. sadly, we will see some dozen iterations of 'flash' until that day finally comes. and html5 js shenanigans are only the third...
- phaer 13y ago
  ...and all those impaired people and people with old and slow devices are finally locked out of our new shiny "sane" web. The web isn't just one visual presentation layer, its a multitude of presentation layers for all kind of people and that demands some compromise.
  - dsego 13y ago
    That seems like a false dichotomy. Why should a nice graphic layer immediately exclude everything else?
    - phaer 13y ago
      It is not, if you frame it like that. But my parent claimed implicitly that the w3c needs to see the web as a pure presentational layer. I have nothing against graphical layers, but a semantic web should stay priority #1 if you ask me. Also: A lot of the shiny new web apps developed during the last few years are unusable with screen readers and/or on low end devices. As long as we can have graceful degradation, i have nothing against more graphical aspects.
  - gcb0 13y ago
    riiight. because the current solution of listening to a webapp via jaws is perfect. They get all the content, which only appears in the end of animations during that nifty scrolling effect. Everyone that needs accessibility is already screwed with regular web presentation hacks. And having to add more presentation hacks to get the presentation right only screw them more. Accepting the web is a presentation, the effort a few sites do to add accessibility to the hacks could be spent adding micro formats to the page content or something, benefiting blinds and people just wanting a easier way to get the content. There are several solutions to problems. And the current state of accessibility on the web is not a prime example of a good one.

scotty79 13y ago

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?

ygra 13y ago
Back then there were images for that; later there was SVG. Triangles with CSS don't actually solve a problem CSS intended to solve.
- scotty79 13y ago
  Back then there were images for borders and even images for padding. CSS solved that. If you add borders why can't you add triangles as well? SVG would be awesome if it could be freely intermixed with HTML. I think I'd ditch HTML for everything other than text boxes and forms.
  - ygra 13y ago
    I haven't seen border images in the wild since CSS added them, I think (apart from examples). Perhaps that was solving a 1998 use-case in 2008. Nevertheless, CSS is still based on styling runs of text and boxes of content. Boxes usually aren't triangular. As for HTML in SVG, there is foreignObject [4.72], but browser support is spotty in places. And wrapping text in arbitrary shapes is on the roadmap for SVG 2, if I remember correctly. But we'll be a bit older when that's universally implemented ;-) [4.72] https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject https://developer.mozilla.org/en-US/docs/Web/SVG/Element/for...
    - drifkin 13y ago
      Border images are great for making resizable buttons. I've used them often in places where support is guaranteed (e.g., Chrome extensions).
  - welly 13y ago
    Where does it stop though? Should CSS provide solutions for polygons too? I think borders are a legitimate styling issue that CSS rightly solves, if only for styling tables. I'm not sure that it's CSS's job to create shapes as well - that, in my mind, is definitely the role of images or SVG.