Home >Web Front-end >CSS Tutorial >Can I Create a Div with a Curved Bottom Using Only HTML, CSS, and JavaScript?

Can I Create a Div with a Curved Bottom Using Only HTML, CSS, and JavaScript?

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2024-12-21 11:31:10907browse

Can I Create a Div with a Curved Bottom Using Only HTML, CSS, and JavaScript?

Creating a Div with a Curved Bottom Using HTML, CSS, and JavaScript

Question:

Is it possible to create a div with a curved bottom purely using HTML5, CSS3, and JavaScript, and if so, how?

Answer:

SVG-Based Approaches:

SVG (Scalable Vector Graphics) is the most recommended approach for creating complex shapes like this. Here are two options:

1. Using Path Element:

Using the path element, you can define the curved shape and fill it with color, gradient, or pattern.

Code:

<path d="M 0,0
         L 0,40
         Q 250,80 500,40
         L 500,0
         Z" />

Path Command Explanations:

  • M: Starting point
  • L: Draw straight lines
  • Q: Draw curves
  • Z: Close the path

Output:

[Image of div with curved bottom created using SVG]

Working Demo:

<svg width="500" height="80" viewBox="0 0 500 80" preserveAspectRatio="none">
  <path d="M0,0 L0,40 Q250,80 500,40 L500,0 Z" fill="black" />
</svg>

The above is the detailed content of Can I Create a Div with a Curved Bottom Using Only HTML, CSS, and JavaScript?. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn