How to build a trapeze menu background with 50% width

Question

How can I build a trapeze shape background for a website menu? The height should be always 100% of the screen.

I have a code for rectangle shape, but I don't know how to add a triangle that has always the same angle?

Here some my code:

The shape should look like this:

enter code here

score 0 · Answer 1 · answered Mar 16 '20 at 10:31

0

You can try this: linear-gradient(71deg, #FFFFFF 50%, #FF3C23 50%)

div {
  height: 75px;
  width: 75px;
  background: linear-gradient(71deg, #FFFFFF 50%, #FF3C23 50%)
}

<div></div>

answered Mar 16 '20 at 10:31

PedroZorus

661
1
6
21

score 0 · Answer 2 · answered Mar 16 '20 at 10:41

Add the following style:

.header__nav::before{
  content: "";
  position: absolute;
  display: block;
  background: #fff;
  top: 0;
  height: 100%;
  width: 60px;
  left: -30px;
  transform: skewX(5deg);
}

You can adjust the angle by increasing the skew angle, but you also have to increase the width and decrease the left value in the same ratio.

For example, if you increase skew angle to 10 then you have to increase width to 120px and decrease the left value to -60px.

How to build a trapeze menu background with 50% width

2 Answers2