CSS spline like background object

Question

I've been learning web development through freecodecamp and looking at templates for product landing page assignment. I landed at shopify page and wondering how can I implement the spline like object at the bottom of the blue background.

I tried creating a div box with border-bottom-right-radius, transform. But they didn't look like what shopify implemented. Also inspected their css file but couldn't figure out what they have done.

Could you help me create a similar one? or point me to a tutorial where I can learn this?

.box {
    height: 500px;
    background-color: rgb(238, 217, 28);
    border-bottom-right-radius:50%;
    /* transform: translateX(-50%);
    transform: translateY(-50%); */
}

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Shape</title>
</head>
<body>
    <div class='box'>
        Container
    </div>
</body>
</html>

I guess they are using simple jpg image as background. Way too complicated as for background image. Or use some SVG element that will scale nicely — Justinas, Jul 14 '20 at 09:06
duplicate of: https://stackoverflow.com/a/60174675/8620333 (you have 3 gradient that you can adjust individually) — Temani Afif, Jul 14 '20 at 09:08
That's what I thought initially. But when I inspected I couldnt figure one. — Adam Iqshan, Jul 14 '20 at 09:08
Use a clipping mask https://css-tricks.com/clipping-masking-css/ — zero298, Jul 14 '20 at 09:21

score 1 · Accepted Answer · answered Jul 14 '20 at 09:23

It is indeed a SVG background, just like Justinas stated. Here, the SVG is inline-embedded whithin the CSS. (background-image: url('data:image/svg+xml;charset=utf8,... followed by the SVG file itself, URL encoded, which means you'll need to substitute %3E by > and %3C by <, and maybe add a few line-breaks)

SVG is quite suitable for this use case since it scales perfectly (that's the S of it), and it offers nice objects for designing curves, in particular the path one, which is used here:

<path fill="rgb(92, 106, 196)" d="M1440 488c-19.3 4.3-39.2 8.6-60 13-174.2 36.5-228.8 288-467 76.2-153.6-136.6-424-22.8-660.4-5.8-130.2 9.3-252.6-75-252.6-75V0h1440"/>

Though most people will rely on vector drawing tools to design such shapes (Inkscape, Indesign, Figma, etc.), it is possible to do so "by hand" once you've understood the d attribute syntax. You'll just need a little practice ;)

CSS spline like background object

1 Answers1