Workit landing page

Community feedback

• 

  Matheus Fernandes•340

  @xtirian

  Posted almost 2 years ago

  Hello, @Sazzadur.

  This curvy background was really difficult to me too.

  The best way I found to represent that was using a different element with the who inherit the color of his parent with width 100%. In the CSS I use the relative position to position in the bottom of the parent. The curve pattern I use this code:

  .ellipsePattern {
    background-color: inherit;
  
    width: 100%;
    height: 4em;
    bottom: -4em;
    left: 0;
  
    clip-path: ellipse(60% 100% at top center); <-----
    position: relative;
  

  This was very difficult to reach that solution because it's unusual to do such curve. You can read more about here, if you wanna try: Mozzilla docs

  This function is like this ellipse ( "How curve you want relative to his own size", "Size that starts the curve" at "Position")

  Hope this helps you!

  00

  Marked as helpful