Section with two colors

Asked

Viewed 1,456 times

3

I’m having a hard time doing a two-color Section (one occupying 70% of the Section and the other the remaining 30%), I wonder how I can do this

follow the example: inserir a descrição da imagem aqui

suggestions?

html css html5 css3

  • should follow the code you’ve tried to do too.

  • i try to do using Divs, but the result does not come out like this in the image above

1 answer

6


You can use a linear-gradient() to achieve the desired effect.

The function linear-gradient() CSS creates a consistent image progressive between two or more colors along a straight line.

section {
  width: 100%;
  height: 10rem;
  background-image: linear-gradient(to bottom, blue 0, blue 70%, yellow 30%);
}
<section></section>

References:

  • Thank you very much! it worked

  • Glad it worked out! Just to remind: you can mark the answer as accepted by clicking on the green V side of the chosen one’s points. Or, if you want, you can leave it open for a while if you want more alternatives.

Browser other questions tagged html css html5 css3

You are not signed in. Login or sign up in order to post.