How to make a curve like this using HTML & CSS using border or box

How to make a curve like this using HTML & CSS using border or box

Creating a curved shape with HTML and CSS can be achieved using the border-radius property. However, creating a complex curve like the one you described may require a combination of elements and styling. Here's an example of a simple curved shape using HTML and CSS:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Curved Shape</title> <style> .curved-shape { width: 200px; height: 100px; background-color: #3498db; border-radius: 0 0 50% 50%; } .content { padding: 20px; color: #ffffff; } </style> </head> <body> <!-- Your HTML content --> <div class="curved-shape"> <div class="content"> This is a curved shape with content. </div> </div> </body> </html>

In this example:

  • The .curved-shape div has a border-radius property set to 0 0 50% 50%. This creates a curved shape by applying a circular border-radius to the bottom corners.
  • The .content div inside the curved shape contains the content you want to display.

Adjust the width, height, colors, and other styles based on your design requirements. If you need a more complex curve, you may need to use SVG or consider other approaches depending on the specific shape you're trying to achieve.

Examples

  1. CSS border-radius for curved element

    .curved-element { border-radius: 50%; }

    Description: Uses border-radius to create a circular or elliptical curve on the specified element.

  2. HTML & CSS curved div with border-radius

    <div class="curved-div"></div> 
    .curved-div { width: 100px; height: 100px; background-color: #3498db; border-radius: 50%; }

    Description: Implements a curved div with a specified background color and border-radius.

  3. CSS clip-path for custom curve

    .custom-curve { clip-path: polygon(0% 100%, 100% 100%, 100% 0%, 0% 80%); }

    Description: Uses clip-path with a polygon to create a custom curve on the specified element.

  4. HTML & CSS curved box with box-shadow

    <div class="curved-box"></div> 
    .curved-box { width: 150px; height: 100px; background-color: #27ae60; border-radius: 0 0 50% 50%; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); }

    Description: Creates a curved box with a shadow using border-radius and box-shadow.

  5. CSS pseudo-element for curve at the bottom

    .curve-bottom::before { content: ''; display: block; width: 100%; height: 20px; background-color: #e74c3c; border-radius: 0 0 50% 50%; }

    Description: Uses a pseudo-element to add a curved shape at the bottom of the element.

  6. HTML & CSS circular curve with gradient

    <div class="circular-curve"></div> 
    .circular-curve { width: 100px; height: 100px; background: conic-gradient(#3498db 0%, #3498db 50%, transparent 50%); border-radius: 50%; }

    Description: Implements a circular curve with a gradient using conic-gradient and border-radius.

  7. CSS skew transformation for slanted curve

    .slanted-curve { transform: skewY(-10deg); }

    Description: Applies a skew transformation to create a slanted curve on the specified element.

  8. HTML & CSS wave-like curve with pseudo-element

    <div class="wave-curve"></div> 
    .wave-curve::before { content: ''; display: block; width: 100%; height: 20px; background-color: #f39c12; border-radius: 0 0 50% 50%; }

    Description: Uses a pseudo-element to add a wave-like curve to the element.

  9. CSS border-image for curved border

    .border-curve { border: 10px solid transparent; border-image: linear-gradient(90deg, #e74c3c, #3498db); border-image-slice: 1; }

    Description: Applies a curved border using border-image with a linear gradient.

  10. HTML & CSS curved background shape

    <div class="curved-background"></div> 
    .curved-background { width: 100%; height: 100px; background: #2ecc71; clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%); }

    Description: Creates a curved background shape using clip-path with a polygon. Adjust the points to control the curve's shape.

More Tags

http-options-method android-contacts redis url-validation notnull android-support-library transducer constructor-injection react-server cordova

More Programming Questions

More Transportation Calculators

More Investment Calculators

More Dog Calculators

More Statistics Calculators