How Can I Create a Curved Div with a Transparent Top Using CSS?

Creating a Curved Div with Transparent Top

Creating a curved div with a transparent top can be achieved using clip path. This technique involves clipping a portion of an element's overflow, creating the desired curved shape.

In your case, to recreate the yellow shape in your example image, you can use the following approach:

.transparent_bg {
  width: 100%;
  height: 485px;
  background: transparent;
  border: solid 5px #000;
  border-color: #000 transparent transparent transparent;
  position: relative;
  overflow: hidden;
}

.transparent_bg:after {
  content: "";
  width: 100%;
  height: 485px;
  position: absolute;
  top: 0;
  background: #00ff00; /* Yellow color */
  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%);
}

This code creates a transparent div with a yellow curved top by clipping the div's overflow with the specified polygon shape. The clip-path property takes a series of points that define the curved shape. Adjusting these points will allow you to customize the shape to your liking.

Alternatively, you can use multiple divs with different clip paths to achieve a more complex curved shape. For instance, you can create a top div with a curved bottom edge and a bottom div with a curved top edge, and overlap them to create a smooth curve.

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