How Can I Create a Wavy Shape Using Only CSS and SVG?

Wavy Shape with CSS

Creating a wavy shape with CSS can be achieved using a combination of CSS3 properties and SVG. Here's a breakdown of how to do it:

1. Create a Container

Enclose the SVG element within a container div to control the shape's size and maintain its aspect ratio. Add the following CSS:

.container {
  display: inline-block;
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  vertical-align: middle;
  overflow: hidden;
}

2. Add the SVG Element

Inside the container, insert an SVG element with a viewBox and preserveAspectRatio property to establish the shape's dimensions and maintain its shape.

<svg viewBox="0 0 500 500" preserveAspectRatio="xMinYMin meet">
  <path d="M0,100 C150,200 350,0 500,100 L500,00 L0,0 Z">

The path definition uses cubic bezier curves to create the wavy shape. The stroke and fill properties control the shape's outline and color, respectively.

3. Position the SVG

Set the SVG element to be positioned absolutely within the container.

svg {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
}

By adjusting the dimensions and values of the container and SVG elements, you can customize the size and shape of the wavy element as desired.

The above is the detailed content of How Can I Create a Wavy Shape Using Only CSS and SVG?. For more information, please follow other related articles on the PHP Chinese website!