How can i create complex background shape using CSS and HTML ( Example image added in the description )

Question

I am working on a project which has a custom shape background and an image on top of it. Its located on the Hero area of the landing page. I need a good solution so that the custom shape will be in the background. And the user can change the image or the Color if they needed.

Here is a demo of the shape I am talking about. Is there any way I can achieve it using CSS, and the user can change the image or color later? What do you think of a solution here?

Thanks in advance.

@Paulie_DI am not telling anyone to write code. I am just asking for a solution, want to know what's the best approach for this problem. Looking for an opinion. I tried using CSS border-radius and all other kinds of stuff but it wasn't close to what I wanted. — Al Amin Khan, Apr 18 '18 at 15:50
`Looking for an opinion`--> and it's no the place for opinion here .. we have rules and on-topic questions .. and this one is off-topic — Temani Afif, Apr 18 '18 at 15:52
@TemaniAfif ok i will keep that in mind. And i am going to delete this post. Thanks1 — Al Amin Khan, Apr 18 '18 at 16:40

score 3 · Accepted Answer · answered Apr 18 '18 at 16:10

This is actually multiple questions.

The now deleted answer by Alexandre Beaudet, that you said was 'Not really close to what I wanted', actually did answer the second question clearly and briefly. You were too blinded by the details of what you want to see the principle you needed to learn from that answer.

Given how easy these elements are to research, I don't even want to show you example code, but here's one:

.wrapper {
  width: 100%;
  height: 300px;
  background: gray;
  position: relative;
}
.background-shape {
  background: orange;
  width: 100%;
  height: 200px;
  -ms-transform: skewY(-20deg);
  -webkit-transform: skewY(-20deg);
  transform: skewY(-20deg);
  border-radius: 30px;
  position: absolute;
  top: 0px;
  left: 50px;
}
.content {
  color: white;
  position: absolute;
  top: 120px;
  left: 30%;
  z-index: 10;
}

<div class="wrapper">
  <div class="content">
    Lorem Ipsum Hero
  </div>
  <div class="background-shape">
  </div>
</div>

This is EXAMPLE code. SO is not a copy-paste solution site. It is here to teach you specific mechanisms you were heretofore unaware of to solve specific problems. It just so happens that code snippets can be one of the best ways to explain things in a succinct and clear way.

To implement this on your website you will need to put a LOT of work into this to position and shape everything so that it actually looks good on all devices.

Thank you so much for your brief answer. I was exactly looking for this. I couldn't think of the process to solve the problem. And that's what I was only asking for the process. Thank you so much for that. As a beginner, I couldn't think the solution like you. I am learning from my mistakes. — Al Amin Khan, Apr 18 '18 at 16:45

score 1 · Answer 2 · answered May 19 '18 at 07:43

I was finally able to solve this problem on the day I posted it on StackOverflow. Thanks to all the guys who have commented. I used a CSS pseudo element to make this shape.

Here is my code.

// Header Shape
.has-header-shape {
  position: relative;
  &::before {
    position: absolute;
    width: 1350px;
    height: 550px;
    content: "";
    background: #0cebeb; /* fallback for old browsers */
    background: -webkit-linear-gradient(
      to right,
      #8cbf86,
      #66b4a6,
      #408ca3
    ); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(
      to right,
      #8cbf86,
      #66b4a6,
      #408ca3
    ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

    z-index: -1;
    top: 0px;
    border-radius: 60px;
    -webkit-transform: skew(0deg, -15deg);
    transform: skew(0deg, -15deg);
    left: auto;
    right: 0;
  }
}

How can i create complex background shape using CSS and HTML ( Example image added in the description )

2 Answers2