Divide a rectangle into 2 triangles along diagonal using css

Question

I want to make a div into 2 triangles (as shown in below, no problem if 1 is background of parent) upper one with one color and lower one with another. I dont mind how it is implemented but i want to do it in css (not javascript). I tried with css rotation, (code below), but its not responsive. In smaller or wider screen it is distorted . Any way to implement this in css?

body {
  background: #eee;
}

.darker {
  position: fixed;
  top: -94%;
  left: -10%;
  width: 150%;
  height: 150%;
  background: #dd4f39;
  -webkit-transform: rotate(30deg);
          transform: rotate(30deg);
}

<div class="darker">&nbsp;</div>

https://stackoverflow.com/questions/7073484/how-do-css-triangles-work — Blazemonger, Jun 05 '17 at 16:29
i know about the css triangles . but in this case i m trying to do it responsive . css triangle need border-width in pixels so cant really implement using css triangles — Jayakrishnan, Jun 05 '17 at 16:36
Sometimes google is not a bad idea: https://jsfiddle.net/josedvq/3HG6d/ — Baro, Jun 05 '17 at 16:39
i did google it but u just gave me the same thing i just said . this implementation needs border-width to be in pixel css doesnt support border-width in % so it wont be responsive — Jayakrishnan, Jun 05 '17 at 16:41
so when i attach this div to body it wont be responsive , if im using triangle as u mentiond above. — Jayakrishnan, Jun 05 '17 at 16:44
if it's see if thiss will work https://jsfiddle.net/karthick6891/kqsrmrss/ — karthick, Jun 05 '17 at 16:51
@karthick this is great but if i can controll the height also it would be better. — Jayakrishnan, Jun 05 '17 at 17:15
@Jayakrishnan you can control the height. All you have to do is give the same height value to the border-top in the pseudo — karthick, Jun 05 '17 at 17:17
so for full size i have to use some jquery like ` $('div').after().height($(window).height());` ? . — Jayakrishnan, Jun 05 '17 at 17:22
@karthick thanks btw. Actually your slightly modified code works perfect for my current context . — Jayakrishnan, Jun 05 '17 at 17:23
@karthick If you post that fiddle you have my upvote...clever done using border — Asons, Jun 05 '17 at 17:30
Does this answer your question? [Two-tone background split by diagonal line using css](https://stackoverflow.com/questions/14739162/two-tone-background-split-by-diagonal-line-using-css) — nCardot, Aug 23 '21 at 23:33

score 12 · Accepted Answer · answered Jun 22 '18 at 16:50

I found an interesting way to do this from here, which uses clip-path .Answering my own question so that everyone can use it.

html,
body {
  margin: 0;
}

body {
  background: #eee;
}

.box {
  width: 100vw;
  height: 100vh;
  background-color: #dd4f39;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

<div class="box"></div>

score 10 · Answer 2 · edited Sep 13 '22 at 08:29

10

This is one way of doing it. But this use case is strictly with respect to vw. Just make sure to give the same value to these elements

div and it's pseudo element should have same width and border-left respectively. div and it's pseudo element should have same height and border-top respectively.

html, body {
  margin: 0;
}

.box {
  width: 100vw;
  height: 100vh;
  background-color: white;
}

.box::after {
  content: ' ';
  border-top: 100vh solid #dd4f39;
  border-left: 100vw solid transparent;
  width: 0;
  position: absolute;
}

<div class="box"></div>

JS fiddle https://jsfiddle.net/kqsrmrss/2/

edited Sep 13 '22 at 08:29

Roj

995
1
8
22

answered Jun 05 '17 at 17:44

karthick

11,998
6
56
88

1

Made a small change, hope it was okay ...and +1 – Asons Jun 05 '17 at 17:50
@LGSon Thanks. Have a nice day – karthick Jun 05 '17 at 17:51

Asons · Answer 3 · 2017-06-05T17:05:54.740

3

You can do that with a skewed pseudo element. The main trick is to keep the aspect ratio the same or else the sloped angle will fail

Fiddle demo

Stack snippet ^{Note 1}

body {
  background: #eee;
}
.darker {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding-top: 50%;
  background: #dd4f39;
  overflow: hidden;
}
.darker::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: gray;
  transform: skewY(26.5deg);
  transform-origin: left top;
}

<div class="darker"></div>

Optionally, you can add media query to control the angle at different screen sizes

Fiddle demo 2

With a tiny script running when window resize's, you can control the angle and make it fully responsive both horizontally and vertically.

^{Note 1} Based on a comment, the Stack snippet might not work properly, and if, try the fiddle demos.

edited Jun 05 '17 at 17:05

answered Jun 05 '17 at 16:50

Asons

84,923
12
110
165

Your fiddle demo works, the snippet view did not unless I go full view – mplungjan Jun 05 '17 at 16:58
also u cant change height – Jayakrishnan Jun 05 '17 at 16:58
@mplungjan Strange...for me both works...in Chrome/Win 10 – Asons Jun 05 '17 at 16:59
@Jayakrishnan No you can't, using CSS this is what you can get. With script or SVG you can get both – Asons Jun 05 '17 at 17:00
i know i can use svg . but im just asking here to know if there is a different way to do it – Jayakrishnan Jun 05 '17 at 17:01
@Jayakrishnan To solve it with CSS you need to use CSS Calc, but since it does not support _squareroot_, you can't calc the angle – Asons Jun 05 '17 at 17:03
@Jayakrishnan With my second fiddle, you'll see that with some media queries you can get closer – Asons Jun 05 '17 at 17:04

Mang Tang · Answer 4 · 2017-06-06T09:50:01.580

0

Please Use this code snippet.

div {
  width: 100%;
  height: 100px;
}

.diagonalRising {
  border: 1pt solid black;
  background: linear-gradient(to right bottom, #eeeeee 0%, #eeeeee 49.9%, #eeeeee 50%, #000000 51%, #dd4f39 51.1%, #dd4f39 100%);
}

.diagonalFalling {
  background: linear-gradient(to right top, #eeeeee 0%, #eeeeee 49.9%, #000000 50%, #000000 51%, #dd4f39 51.1%, #dd4f39 100%);
}

.diagonalCross {
  position: relative;
  background: linear-gradient(to right bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 49.9%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 1) 51%, rgba(0, 0, 0, 0) 51.1%, rgba(0, 0, 0, 0) 100%);
}

.diagonalCross:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  background: linear-gradient(to right top, #ffffff 0%, #ffffff 49.9%, #000000 50%, #000000 51%, #ffffff 51.1%, #ffffff 100%);
}

<div class="diagonalRising"></div>
<div class="diagonalFalling"></div>
<div class="diagonalCross"></div>

edited Jun 06 '17 at 09:50

answered Jun 05 '17 at 16:42

Mang Tang

1
3

And how to dynamically follow resize? – mplungjan Jun 05 '17 at 16:46
You can resize div element by jQuery and jQery UI library. – Mang Tang Jun 05 '17 at 16:57
– Mang Tang Jun 05 '17 at 16:57
I meant your squares are static. They need to resize when the window is – mplungjan Jun 05 '17 at 20:30

score 0 · Answer 5 · edited Nov 22 '20 at 06:50

0

Try this,

.box::after {
    background:  #E52A35
    content: '';
    position: absolute;
    width: 100%;
    height: 100vh;
    background-color: #dd4f39;
    clip-path: polygon(52% 13%, 104% -1%, -1% 0%);
}

edited Nov 22 '20 at 06:50

Abhishek Gurjar

7,426
10
37
45

answered Nov 22 '20 at 03:03

Vijay Chauhan

1,282
19
18

Divide a rectangle into 2 triangles along diagonal using css

5 Answers5

Linked

Related