Responsive Diagonal Two-Tone Backgrounds with CSS (Corner to Corner)

by Josh | Posted in Scripts & Code Snippets, Tutorials & Guides

See the Pen Diagonal Responsive Two-Color Backgrounds CSS by Josh Winn (@forthewinn) on CodePen.0

Say you want to create a button whose background in the top left is one color, and a different color in the bottom right. The color is basically split with a diagonal line from the bottom left corner to the top right corner. It seems simple, yet a lot of the CSS techniques I came across out in the web, for making this responsive (regardless of the size of the button) were very dated, or needed JavaScript.

It’s very simple using the linear-gradient property and “magic corners”.

Gradients as Solid Colors

We’re used to thinking of linear-gradients as well..gradients. Colors that fade from one to another. But they can also be used for solid colors. If your “color-stop” positions both start and end at the same point, there’s no color blending in the middle, so you get two solid colors on both sides.

To the Corner

CSS gradients also have an angle option. So you could say linear-gradient(45deg, blue, orange) and that will split your gradient at a nice 45 degree angle. But if your element is not a fixed width and height, this won’t go from corner to corner. Thanks to the MDN reference page, I saw that you can also specify to <side-or-corner>, where <side-or-corner> is left/right top/bottom. So for our button example, as seen in the CodePen, is:

background: linear-gradient(to right bottom, #2f3441 50%, #212531 50%);

That’s it. As for old browser support, this does not work in IE9—which is why I give a regular solid background color before the gradient, so there is a fallback.

Reference and More Info

Recommended Books For Web Devs

CSS Secrets [Book Cover] Building out a design into HTML and CSS is like a series of small puzzles— some trickier than others. CSS Secrets: Better Solutions to Everyday Web Design Problems is a practical and modular look at many of the unique challenges you'll encounter during front-end development. Well-designed, and easy to pick up for any intermediate to advanced front-end dev looking to pick up some tips and tricks, and honing the processes used to figure them out.

Eloquent JavaScript [Book Cover] Eloquent JavaScript: A Modern Introduction to Programming is an engaging and well-formatted overview of JavaScript, complete with example projects and helpful diagrams. It's easy to read—not too dense, with readable type—and covers many subjects. The revised edition covers some of the newer features of JavaScript, including: class notation, arrow functions, iterators, async functions, template strings, and block scope.

The Phoenix Project [Book Cover] While The Phoenix Project: A Novel about IT, DevOps, and Helping Your Business Win is a fictional novel, the slightly exaggerated characters and situations involved will be very familiar to anyone working in software development and IT. In it, an IT manager is confronted with the seemingly impossible task of turning around a project that's over-budget and past deadlines in 90 days, or else his department will be outsourced. The morals and takeaways from this story about DevOps and lean principles will stick with you.

Comments on this Article

  1. | Link
    Mark says:

    Great Joshua, thank You very much. But is there a way how to smooth the diagonal line? Right now you can see it’s a little bit choppy- it’s ok on those buttons but I tried these technique on my navigation bar and it looks terrible unfortunately.

    Reply
    • | Link
      Josh says:

      Unfortunately Chrome renders it a bit jagged. The angles look a lot smoother in Firefox (especially on the bigger button). The jaggedness is more noticeable when the colors have a lot of contrast. Chrome will render it smoothly only at 45 degrees right now. I’m not aware of any CSS that can fix that; this is something on the browser side that will hopefully change eventually. I see a few open chromium issues related to it.

      Reply
      • | Link
        Richard says:

        You can blend the line a bit in Chrome with background: linear-gradient(to right bottom, #2f3441 49%, #212531 50%);.

        Note the 49% versus 50% for the first color. This creates a nearly unnoticeable gradient that smoothes the jagged line.

        Reply
  2. | Link
    Volker says:

    Hi,
    it is possible to use images instead of colors?

    Thx
    Volker

    Reply
  3. | Link
    zJoriz says:

    Sweet tip, thanks! I also smoothed the gradient somewhat (49%/49%), seems to help to keep it ‘anti-aliased’.

    Reply
  4. | Link
    MARK NDOWOBE OKABA says:

    Thanks so much Josh. I was about to smoothen the edge by 49.9 and 50, largely depending on the colors of course

    Reply

Leave a Reply

You can use the <pre> tag to post a block of code, or <code> to highlight code within text.