I am trying to design a header with multiple css colors on it. Only from colors

Question

I am trying to make a header that look somewhat like the above image.

I want to add shapes in different shades of green. (The images is a modified in paint.)

I have played around with what I could find on the internet and ended up with this:

.container 
    position: relative
    width: 100%
    min-height: 100vh
    margin: 0 auto
    overflow: hidden
    background-color: green
    &::after 
        content: ''
        position: absolute
        background-color: #6fbc29
        padding-bottom: 124.42136%
        width: 100%
        bottom: 0
        left: 0
        transform: rotate(80deg) 
        transform-origin: left bottom

https://codepen.io/anon/pen/rGXQaw

I don't want to add a image as background. I can't figure out how to add more shapes to this code. Is there another way i should try to compose it?

Can someone please help?

Answer 1

As you can see, you have 4 colors so we can do it in this way :

1) first color will be the background of the container

2) second color can be a border color of the container

3) third one using :before element

4) fourth one using :after element

And the trick is to use some skew and rotation transformation

body {
  overflow: hidden;
}

.container {
  background: red;
  height: 100px;
  border-left: 65px solid blue;
  transform: skew(30deg);
  overflow: hidden;
  width: 110%;
  position: relative;
  left: -40px;
}

.container:before {
  content: " ";
  position: absolute;
  background: pink;
  width: 500px;
  height: 100px;
  left: -180px;
  transform: skew(60deg);
}

.container:after {
  content: " ";
  background: green;
  width: 180px;
  height: 180px;
  position: absolute;
  bottom: -126px;
  left: 200px;
  transform: rotate(30deg) skew(-10deg);
}

<div class="container"></div>

Then you may adjust the values and color as you want.