How Can I Create Curved Transparent Divs Using CSS?

Creating Curved Transparent Divs with CSS

In your quest to design a transparent div with a curved shape, you encountered difficulties in achieving the desired effect. Let's explore how to overcome this challenge and craft the curved shape you seek.

To create the curved shape, CSS offers the clip-path property, which enables you to define the shape of an element using various geometric functions. You can apply it to either the top element or the bottom element, creating an overlay effect.

The following code snippet demonstrates how to achieve the desired shape using clip-path:

.first, .second {
  display: inline-block;
  margin: 5px;
}

/* For the first div */
.first .top {
  clip-path: circle(72.9% at 50% 27%);
  height: 200px;
  width: 200px;
  background: url(https://picsum.photos/id/10/800/800) center/cover;
  position: relative;
}

.first .bottom {
  margin-top: -70px;
  background: yellow;
  height: 100px;
  width: 200px;
}

/* For the second div */
.second .top {
  height: 200px;
  width: 200px;
  background: url(https://picsum.photos/id/10/800/800) center/cover;
  position: relative;
}

.second .bottom {
  clip-path: polygon(0 25%, 14% 41%, 28% 51%, 49% 54%, 66% 53%, 79% 48%, 89% 39%, 100% 27%, 100% 100%, 47% 100%, 0% 100%);
  margin-top: -70px;
  background: yellow;
  height: 100px;
  width: 200px;
}

This code creates two divs, one with a circular top and a yellow bottom, and the other with a custom polygonal top and a yellow bottom. By adjusting the clip-path values, you can create different curved shapes as desired.

By utilizing clip-path, you have the power to design captivating curved shapes and elevate the aesthetic appeal of your website or web application.

The above is the detailed content of How Can I Create Curved Transparent Divs Using CSS?. For more information, please follow other related articles on the PHP Chinese website!