Quick Tip: Drawing and Using CSS Triangles
videos

Quick Tip: Drawing and Using CSS Triangles

on Jul 16th 2012 with 26 comments
Tutorial Details
  • Topic: CSS
  • Difficulty: Beginner
  • Screencast duration: 10 mins

We’ve entered an age where resolution independence is an important aspect of your web design. Build your interfaces with scalable techniques (instead of bitmap images) and the retina display users out there will be singing your praises. Let’s start today by getting to grips with triangles using CSS – we’ll look at a couple of approaches and a real-world application.

Watch Quick Tip

Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes or YouTube!

Joren Van Hee is joren on Codecanyon
 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

Joren Van Hee is a student from belgium, with a passion for webdevelopment. Besides all that nerdy stuff, he also plays the drums.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • LessLessMoreMore

    “We’ve entered an age where resolution independence is an important aspect of your web design.” Give me a freaking break. We’ve just entered an age where people are starting to consider it. It’s not already an “important, deal-breaking, everyday aspect of every project we do.” Just because of TWO devices the whole web is crying and pleading for a movement to resolution-agnostic design. Are you kidding me? I’m not ditching 960grid and raster images because of two stupid Apple products. People using them can just deal with fuzzy images and whitespaces for now.

    • http://www.snaptin.com Ian Yates

      Just to clarify (and make sure that Joren doesn’t get it in the neck) that was my comment. I wasn’t saying we should all aim to optimise our designs for retina displays, I simply meant that owing to the unpredictable nature of devices (both now and in the future) it’s in our interests to get used to scalable techniques.

      SVG and CSS3 are just two ways we can become less reliant on bitmaps to produce visuals – so yes, it’s important to understand them.

    • http://eichefam.net Paul

      Wow. Angst much?

      While it does indeed seem to be a result of Apple’s devices that much of the webdev world is now clamoring for resolution-independent quality websites, you can’t say this is a bad thing. When you think about it, it’s something that we should have already desired.

      You may not like Apple’s style or methods, but you can’t argue with the results. They’ve helped to move the web along in better ways than most companies.

      • http://www.snaptin.com Ian Yates

        And while we’re on the topic – Thomas Fuchs is busy writing an eBook which will help clear up any confusion about retina-mumbo-jumbo. Sign up to qualify for discounts when it publishes :)

      • LessLessMoreMore

        Much? No, but quite a bit. I’m sincerely annoyed.

        To clear up my primary point a little, I was not in any way referring to device agnosticism as it relates to making a mobile solution, be it mobile sites or responsive designs. I was just referring to the “resolution agnosticism” as it relates mainly to max-size and the use of raster vs. vector graphics in general. With that said, I firmly stand by my admittedly sassy response. I don’t appreciate how a lot of people are going apes**t and crying about how we now need to make everything “retina-first.” That is bs. I’ll just wait ’til retina is the norm or the majority, then I’ll just make all my web graphics a higher PPI and a bigger size. We’ll probably just move up to a 1200g norm. For now, 960g and 72PPI will be just fine.

        • Gavin

          “I’ll just wait ’till retina is the norm or the majority”

          Yep, you do that.

          Let everyone else try to stay with or ahead of the game.

          Some developers prefer to offer their clients the latest solutions and have them degrade gracefully. Some designers tell their their clients they dont need the latest stuff now. They need it in a year when you pop back for the ‘new’ design.

          Even if you are not going to offer this to you clients, please dont wait till its main steam before you learn the techniques, or by the time you do, you will be to far behind and wont have a chance.

          Some of us, like to learn the techniques and read articles so that when we do start to use the techniques, we are ready to do so.

          • LessLessMoreMore

            “Let some other developers try to get ahead of themselves and turn a new fad into a scramble to constantly look progressive.” Fixed.

            If I were arguing about not being mobile compliant, or ignoring trends toward full-blown device agnosticism, etc, I’d agree. There are big fix and small fish. This is currently a tiny fish. Don’t make a mountain out of a molehill. When large pixel densities are well and along, I’ll be into the swing of things by then. Don’t go worrying about me. But I’m not going to rush into something and add more work (which is all progressive enhancement is more than half the time, more work — a.k.a. give the new people their taste, but then do it the old way on top of that, doubling your workload when the old way would work and look the same for everyone anyway – but hey, you can say you did it the new way) just because of two Apple devices.

            There’s a difference between monitoring the market and choosing your approach, versus jumping on bandwagons and bending to trends in the name of “keeping up.” I’m starting to wish I were still 22-years-old and relatively new to this. Maybe then I’d see these truths all you near-teens seem to have a monopoly over.

          • LessLessMoreMore

            p.s. If people really pitch a bitch, just slap on a “RetinaCrybaby” media query and use jumbo graphics. Worried about file size? If they can afford a retina macbook or iPad, they should have good internet speeds. Problem solved. I know most developers won’t like that, being as anal retentive as they are. Nope, gotta assume some people with $600 tablets and $20,000 laptops can’t load a 300PPI jpeg that’s 700KB. Gotta make that an SVG just ’cause! They might be on McGyver’s dial-up on their Macs!

            Seriously. The new developer philosophy: “Being OCD beyond reason. Because it’s our duty to account for everything!” Even if devices met developers halfway or more, they’d still pretend they didn’t and try to make everything with 10,000 degrading contingencies…just because.

        • Matt Dance

          I agree with LessLessMoreMore. It’s getting a bit ridiculous. Most clients aren’t going to pay for our time to develop for every screen size, bandwidth, javascript, no-javascript, mobile, no-mobile, tablet, no-tablet out there.

          I suppose it all depends on whether the client is willing to pay, eh?

          • http://www.snaptin.com Ian Yates

            You’d be better off looking at this from a different angle I think – instead of trying to tailor your work to the plethora of devices out there, aim to make your work device agnostic. To paraphrase Brad Frost; think of your content as water, filling whatever vessel it’s poured into.

            Strip things back to the basics, use future-friendly techniques and you won’t need to worry about things breaking. Happy clients :)

  • supprof

    good trick
    that the kind of the trick that we need and i have to addmit this is the best one that i learend from
    i saw this video 5 days a go because i’am subscribed in the youtube channel!?
    thank you very mutch tips and tricks

  • http://govertz.dk Govertz

    @LessLessMoreMore Having a bad day? Did you watch the video?

  • Al

    note that he did use Chris Coyier’s new Codepen,

    neat!

    Al

  • http://www.adipurdila.com AdiPurdila

    Some really nice techniques in there, great tut.

    About resolution independence… I think it’s the way forward, everyone should start embracing it if they don’t wanna be left behind. Think about RWD, that opened the flood gates for loads of new techniques including scalable graphics. And more and more people are adopting and using them in their everyday projects.

    So, I guess you gotta ask yourself: do you want to wake up one day trying to sell 960 grid layouts in a world that’s already past those? Personally, I don’t want that and it’s my opinion that we should all move forward and adapt to the new trends.

  • Maarten

    I actually don’t like the latter technique, with the tooltip being rotated. If you look very well, the borders of the tooltip don’t really fit/blend with the rest.

    The pseudo-combination :hover:after is a killer one! Great technique. Didn’t even know that it was possible :)

    • Maarten

      Almost forgot: content: attr(“data-tooltip”). Awesome!

  • John Belisle

    GREAT Tutorial! I use :before and :after quite a bit but have never tried the attr content property. That was a good little tip itself. The rest of it was good information as well with practical application. Jeffrey Way showed how to use this same technique to make web ribbons as well http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-practical-css-shapes/

    Good insight, I enjoyed this!

  • http://richardmisencik.com Richard

    Great, thank you for the quick tip. Keep them coming :)

  • Pingback: Quick Tip: Drawing and Using CSS Triangles | Qoozon

  • Dougieladd

    Yes really good tip. I will enjoy trying this technique out on my new Apple Mac Book Pro with Retina Display and viewing it on my new Apple iPhone 4s, as well as my new Apple iPod Touch not to mention checking my design on my new Apple iPad 2… :) Thanks for the great tutorial and thanks for contributing in a positive manner ;)

  • Hamid

    OMG !! That’s perfect! really nice tricks that remind me chris’s tricks, and hey you stop blaming Joren and take a life!

    Really thank you for that screencast Joren, cya in the next vide.

    Hamid.

  • http://www.step4wd.com Muhammad Ahmad Zafar

    Great tip especially the use of CSS properties and attributes like attr() and whitespace etc.

  • http://trki.sk trkiwp

    Really nice trip. I like it a lot. I learned a lot ! i hope u will have more tutorials like this because this was really good! :)

  • hmmm
  • eddieA

    Thank you. Very informative and easy to follow. I wish I could learn from Joran Van Hee everyday.

  • Pingback: A Flexible Approach to Responsive Navigation | Webdesigntuts+

  • http://www.mikewarddesign.co.uk/ Web Design Banbury

    Very easy to follow and will come in handy! thanks for sharing

  • Pingback: Create a Quick, Sticky Menu | Webdesigntuts+

  • Pingback: Create a Quick, Sticky Menu | Directory Net

  • Pingback: Create a Quick, Sticky Menu | iDevie