How can I shape an image like an svg?-CodePudding

I'm creating a website using HTML and CSS. Under the Hero Image, I want to give some waves. I have this SVG

<svg width="1716" height="959" viewBox="0 0 1716 959" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 752L58 769C115 787 230 821 346 864C461 908 576 959 691 942C806 925 922 839 1037 795C1152 752 1267 752 1382 787C1498 821 1613 890 1670 925L1728 959V0H1670C1613 0 1498 0 1382 0C1267 0 1152 0 1037 0C922 0 806 0 691 0C576 0 461 0 346 0C230 0 115 0 58 0H0V752Z" fill="black" fill-opacity="0.5"/>
</svg>

and I want to shape the Hero Image like this. How can I do so?

CodePudding user response：

Ohk, this is a nice one. Here is fully working code, just replace your resources :)

You just need to use svg with position:absolute and you are done.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  width: 100%;
  overflow-x: hidden;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

section {
  position: relative;
  height: 100vh;
}

section .content {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 50px;
  width: 100%;
  color: #121212;
  height: 100vh;
  background: url("https://images.unsplash.com/photo-1550969026-f069940eedae?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80");
  object-fit: cover;
  background-size: cover;
  background-attachment: fixed;
  background-position: center center;
}

.wave {
  padding: 0px;
  position: absolute;
  bottom: 0;
  width: 100%;
  left: 0;
  right: 0;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <section>
    <div >Content</div>
    <svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
            <path fill="#fff" fill-opacity="1"
                d="M0,224L60,229.3C120,235,240,245,360,229.3C480,213,600,171,720,154.7C840,139,960,149,1080,176C1200,203,1320,245,1380,266.7L1440,288L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z">
            </path>
        </svg>

  </section>
</body>

</html>

CodePudding user response：

Right so you want to put the hero image on the dark part of the SVG...thats how i seem to understand.

you can edit the SVG to have the image on top..ie microsoft 365 says "By converting an SVG image or icon to an Office shape you can disassemble the SVG file and edit individual pieces of it. Converting the file is quite easy; just right-click the SVG image in your document, workbook, or presentation and select Convert to shape from the context menu that appears"....that can work.
if already in two different parts (the black top and white bottom) i can suggest replacing the top bg color with a bg-image...

hope i helped :)