0

I want to create a background like in this example;

enter image description here

I tried this code

.home {
  height: 100vh;
  margin: 0;
  background-image: radial-gradient(
    120% 100% at top left,
    #272934 61%,
    #272934 92%,
    transparent 92%
  );
  background-repeat: no-repeat;
}
  <section class="home py-4" style="background-color: #1DC44F;">
    <div class="container-lg">
      <div class="row min-vh-100 align-items-center align-content-center">
      </div>
    </div>
  </section>
SoyUltro
  • 1
  • 2

1 Answers1

0

One can do shapes in CSS but not any shapes, I have tried that before and sat for countless hours, before going the svg and extra bytes route. Maybe going with an svg image rather than trying to leverage full-on CSS would be best. I would recommend the canvas / svg route, to implement it successfully, by making the custom svg in eg. Adobe Illustrator or even Figma. You can try playing around with the CSS in js fiddle if you want to try going the full css way.

This was a post on Stack a few years ago: CSS vs SVG.

Here is a blog post on the comparison of CSS vs SVG.

Shanré Scheepers
  • 54
  • 6