How to create a Slanted Background with CSS?

Question

I've attached a picture to show the exact layout. The line in the photo is only there to show where the colors should change.

Here is some code I have tried but doesn't look how I want.

.block {
  background-color: black;
  left: -50;
  height: 150px;
  width: 100%;
  transform: rotate(-40deg);
}

<body>
  <div class="block">

  </div>
</body>

What about creating an image and using that as a background? — Ctznkane525, Dec 23 '17 at 18:52
That's a bad advice as it uses more resources and the website becomes heavy on load and also it's not responsive. This can be accomplished with CSS with 3 lines of code. — Vladimir Jovanović, Dec 23 '17 at 19:03

Temani Afif · Accepted Answer · 2020-08-04T09:32:01.257

You can use pseudo element with skew transformation :

body {
  height: 100vh;
  margin: 0;
  background: yellow;
}

body:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 300px;
  background: #000;
  transform: skew(-30deg);
  transform-origin:top;
}

To keep the same visual on resize, set a big fixed height for the pseudo element and center it:

html {
  background: yellow;
}

html:before {
  content: "";
  position: fixed;
  top: calc(50% - 1000px);
  left: 0;
  width: 500px;
  height:2000px;
  background: #000;
  transform: skew(-15deg);
  transform-origin:top;
}

score 14 · Answer 2 · answered Dec 23 '17 at 18:54

14

Use a linear gradient at an angle

body {
 margin:0;
 }

div {
  height: 100vh;
  background: linear-gradient(105deg, black 25%, yellow 25%)
}

<div></div>

answered Dec 23 '17 at 18:54

Paulie_D

107,962
13
142
161

1

@TemaniAfif Good catch! In Firefox 57 there's hardly any difference. Chrome 63, on the other hand, renders the gradients with pretty rough jagged edges. See [this fiddle](https://jsfiddle.net/48hqy4ye/) for a side-by-side comparison. Probably browsers applying different anti aliasing. Possibly, as you said, because the gradient function isn't intended for such sharp transitions? Just a thought! – agrm Dec 23 '17 at 22:40
1

@TemaniAfif The solution seems to be to roughen (as in, opposite of round) the numbers: maybe '24.98%' or better 'calc(25% +1px)'... last seems to have better results in more browsers but not always. – user3445853 Oct 02 '20 at 12:49

score 1 · Answer 3 · answered Dec 23 '17 at 18:57

.left-sidebar {
  position: absolute;
  width: 20%;
  background: #000;
  transform: skewY(5px);
}
.content {
  background: #fff;
}

The property that "curves" the div is this property in CSS transform: skew(X,Y).Try that, hope it helps.

But I suggest that you create 2 div side-by-side in order to get the desired effect.

How to create a Slanted Background with CSS?

3 Answers3

Linked

Related