Rectangular div css

Question

I want to use a rectangular background like the red part of the following image. How can I do it?

I would like to use a background something like

#trapezium {
  height: 0;
  width: 50vw;
  border-bottom: 100vh solid #ec3504;
  border-left: 60px solid transparent;
}

Shidersz · Answer 1 · 2018-10-27T22:37:53.430

3

You will need to use linear-background, maybe something like this one:

.testBG
{
    width: 100vw;
    height: 100vh;
    background: linear-gradient(115deg, #aaaaaa 50%, red 50%);
}

<div class="testBG"></div>

On the next examples, the color stops (percentages) are not equal just to emulate a smooth transition between colors, and the angle is changed too:

.testBG
{
    width: 100vw;
    height: 100vh;
    background: linear-gradient(100deg, #aaaaaa 50%, red 51%);
}

<div class="testBG"></div>

.testBG
{
    width: 100vw;
    height: 100vh;
    background: linear-gradient(125deg, #aaaaaa 50%, red 80%);
}

<div class="testBG"></div>

edited Oct 27 '18 at 22:37

answered Oct 27 '18 at 16:31

Shidersz

16,846
2
23
48

Thanks a lot. You saved me a night. – s.k.paul Oct 27 '18 at 16:38
Here is a little problem. The slope is not smooth. Any help? – s.k.paul Oct 27 '18 at 16:45
You can play with the **color stops** (percentages) of the **linear-background** to emulate smooth transtition between the colors. I add a few more examples. Anyway, what you mean with the slope is not smooth, can you give me more details? – Shidersz Oct 27 '18 at 22:30

score 1 · Accepted Answer · answered Oct 27 '18 at 18:02

You can make this with 2 divs ( which i can see in your question that you have two separate elements ) . An make a shape from borders.

See more about css shapes here -> the shapes of css

   .right {
     border-bottom: 200px solid red;
     border-left: 25px solid transparent;
     border-right: 0px solid transparent;
     height: 0;
     flex: 0 50%;
   }

   .left {
     flex: 0 50%;
   }

   .wrapper {
     width: 200px;
     height: 200px;
     display: flex;
     background: grey;
   }

<div class="wrapper">
  <div class="left">
    bbbbbbbbb bbbbbbbbbb bbbbbbbb bbbbbbb assssss sssssssssss
  </div>
  <div class="right">
    bbbbbbbbb bbbbbbbbbb bbbbbbbb bbbbbbb assssss sssssssssss
  </div>
</div>

I would like to use it as a background. See my update. – s.k.paul Oct 27 '18 at 18:24 — s.k.paul, Oct 27 '18 at 18:24

Rectangular div css

2 Answers2