37

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.

Background split by diagonal line

MG1
  • 1,655
  • 9
  • 33
  • 46

7 Answers7

53

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

.diagonal-split-background{
  background-color: #013A6B;
  background-image: -webkit-linear-gradient(30deg, #013A6B 50%, #004E95 50%);
}
Tom Bevelander
  • 1,686
  • 1
  • 22
  • 31
  • 3
    @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%);` – timlg07 Apr 18 '20 at 21:01
21

Here are the examples in action: http://jsbin.com/iqemot/1/edit

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(http://www.webdesign.org/img_articles/14881/site-background-pattern-07.jpg);
}

#triangle-topleft {
  width: 0;
  height: 0;
  border-top: 100px solid gray;
  border-right: 100px solid transparent;
}
<div id="container">
  <div id="triangle-topleft"></div>
</div>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
gotohales
  • 3,665
  • 1
  • 20
  • 34
  • Is it possible to make this responsive? – MG1 Feb 06 '13 at 23:14
  • 1
    @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. – gotohales Feb 07 '13 at 14:15
18

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

HTML:

<div id="container"></div>

CSS:

#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);
}

JSFiddle

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.

JSFiddle

Resources:

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

Using jQuery how to get click coordinates on the target element

Community
  • 1
  • 1
harvzor
  • 2,832
  • 1
  • 22
  • 40
2

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

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

    <title>Diagonal</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

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

    </div>

</body>
</html>
moe_b
  • 21
  • 1
2

This is a full responsive solution. Note the 50.3% on the second stop point, this avoids the pixelating of the line as mentioned in the above comment by @timlg07

.responsive-diagonal {
width: 50vw;
height: 20vh;
background: linear-gradient(to right bottom, #ff0000 50%, #0000ff 50.3%);
}
<div class="responsive-diagonal"></div>
Brad
  • 8,044
  • 10
  • 39
  • 50
0

Method 1:

<div class="triangle"></div>

body {
  margin: 0;
}

.triangle {
  background-image: linear-gradient(to bottom right, LightGray 50%, Salmon 50%);
  height: 100vh;
}

https://codepen.io/x-x00102/pen/ZEyEJyM

Method 2:

<div class="triangle"></div>

body {
  margin: 0;
}

div {
  width: 100vw;
  height: 100vh;
}

.triangle::after {
  content: '';
  position: absolute;
  border-top: 100vh solid LightGray;
  border-right: 100vw solid Salmon;
}

https://codepen.io/x-x00102/pen/VwWwWGR

nCardot
  • 5,992
  • 6
  • 47
  • 83
0

Here's a solution to add a diagonal line triangle to the end of a section, it requires one of the two sections to have a flat colour BG, but allows for the other to be a gradient or image.

The demo below shows it with the main section having a gradient, and the section below being a solid colour (in this instance, white).

/* Cruft for the demo */

body {
  margin: 0;
  padding: 0;
}

.gray-block {
  background-image: linear-gradient(to bottom right, #000, #ccc);
  color: #fff;
}

.gray-block__inner {
  padding: 20px;
}

/* The actual solution */

.diagonal-end::after {
  content: "";
  display: block;
  margin-top: -6vw; /* optionally move the diagonal line up half of its height */
  border-top: 12vw solid transparent; /* change 12vw to desired angle */
  border-bottom: 0px solid transparent;
  border-right: 100vw solid #fff;
}
<div class="gray-block diagonal-end">
  <div class="gray-block__inner">
    <span>Some content</span>
  </div>
</div>
fredrivett
  • 5,419
  • 3
  • 35
  • 48