Two-tone background split by diagonal line using css

I am trying to create a background using css where one side is a solid color and the other is a texture: the two are split by a diagonal line. I would like this to be 2 separate divs since I plan to add some motion with jQuery where if you click on the right, the grey triangle gets smaller and if you click on the left the textured triangle gets smaller (like a curtain effect). Any advice would be greatly appreciated.

Here are the examples in action:

You can change the placement of the diagonal line with the border pixels. With this approach you would have to position content over the background setup however.

#container {
  height: 100px;
  width: 100px;
  overflow: hidden;
  background-image: url(;

#triangle-topleft {
  width: 0;
  height: 0;
  border-top: 100px solid gray;
  border-right: 100px solid transparent;
<div id="container">
  <div id="triangle-topleft"></div>

Responsive Diagonal Two-Tone (Angle) Backgrounds with CSS, 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. Responsive Diagonal Two-Tone Backgrounds with CSS (Corner to Corner) 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.

I think using a background gradient with a hard transition is a very clean solution:

  background-color: #013A6B;
  background-image: -webkit-linear-gradient(30deg, #013A6B 50%, #004E95 50%);

Diagonal Two Color Background, You can also link to another Pen here, and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before� CSS Background Size. The CSS background-size property allows you to specify the size of background images. The size can be specified in lengths, percentages, or by using one of the two keywords: contain or cover. The following example resizes a background image to much smaller than the original image (using pixels):

For this sort of thing you could use pseudo selectors such as :before or :after in your CSS to minimize on unnecessary HTML markup.

<div id="container"></div>
#container {
    position: relative;
    height: 200px;
    width: 200px;
    overflow: hidden;
    background-color: grey;


#container:before { 
    content: '';
    position: absolute;
    left: 20%;
    width: 100%; 
    height: 200%; 
    background-color: rgb(255, 255, 255); /* fallback */
    background-color: rgba(255, 255, 255, 0.5);
    top: 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);


I then attempted to to make it so that each section could expand depending on where you clicked. This unfortunately requires a little extra jQuery as the position of your click (relative to the the box) needs to be worked out.

A class is then added to the box which changes the :before pseudo object. The upside of using a class is that CSS animations are optimized better for the browser than jQuery ones.



Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery

Using jQuery how to get click coordinates on the target element

css3 Two tone background split by diagonal line using css?, .diagonal-split-background{ background-color: #013A6B; background-image: - webkit-linear-gradient(30deg, #013A6B 50%, #004E95 50%); }. I think using a� Two Tone Half Color Background. Related wallpapers Download wallpaper See full resolution image Two Tone Background Split By Diagonal Line Using Css Stack Overflow">

This method words on different sized windows and fills the screen. Even works on mobile.

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">

            margin: 0;
            padding: 0;

            width: 100%;
            height: 100vh;
            background-image: linear-gradient(to top left, #e394a3 50%, #8dd6a6 50%);
    <div class="diagonalimg">



CSS Tutorial: Create Diagonal Layouts Like It's 2020, Hide part of your section using CSS-Clip-Path. For now, the outer container gets nothing more than a nice little gradient as background-image. being scared that it will cross the diagonal lines, you need a little padding. x = tan(α) * a / 2 text-align: center; background: #fff; color: #003; font-weight: 900;� The above example has some extra CSS style thrown in (like border-radius and box-shadow). Essentially, the background property can hold two contents one over the other: 2 gradients, 2 images or you can mix-and-match any of those. To use more than 2 colors (because why not), put the powerful rgba() to use and use 2 gradient parameters.

Stripes in CSS, Normal Colored Diagonal Stripes. Diagonal stripes are easy to pull off thanks to repeating-linear-gradient() : background: repeating� How to draw vertical and diagonal lines with HTML and CSS. The first method is to take a horizontal line and use the transform property to rotate it. But don't forget to add a background

Responsive Diagonal Website Design Tutorial, To create a linear gradient you must define at least two color stops. gradient effect. diagonal Duration: 11:51 Posted: Sep 18, 2018 Hey guys I’m trying to find a solution for a way to make the body, 2 colours. First one let’s just say black starts from the top and it will end at 50% of the browser height, and the second colour – white, starts from the 50% from the browser height and end up to 100% of the browser height.

Setting Backgrounds & Gradients, Within CSS, element backgrounds can be a solid color, an image, a gradient, or a When using an RGBa or HSLa value as a transparent background color, it's a The background-position property requires two values: a horizontal offset (the .hero { color: #fff; line-height: 44px; padding: 22px 80px 66px 80px; text-align:� List of Two Tone Background Double Color, Awesome images, pictures, clipart & wallpapers with HD quality. | AGUSTINMUNOZ offer daily download for free, fast and easy.

  • What about css transforms? Or css only triangles?
  • Is there a better approach for this?
  • Is it possible to make this responsive?
  • @MG1 There may be other approaches that I am not aware of. As for responsive, anything can be responsive that is handled by CSS, with media queries and the like.
  • This is particularly elegant if images are not needed
  • This looks pretty pixelated on my screen :S
  • This was an easy and efficient way to accomplish this. By far than most other comment. Thanks!
  • @Borjante If you want to have it smoother, let a bit space between both colors. You often don't even need a full percentage, in my case this looked fine: ... #color 50%, #color 50.3%);