How to Create a Transparent Curved Shape with Rounded Sides Using CSS Radial-gradient?

CSS Transparent Curved Shape with Two Rounded Sides

Creating a curved, transparent shape can be a challenge, especially when you want to have rounded sides. In this article, we will explore a solution using radial-gradient.

Initial Attempt

Initially, you attempted to create a curved shape using a combination of absolute positioning and a curved border radius. However, the background remained opaque, preventing the blue background color from showing through.

Solution Using Radial-gradient

A better solution is to use radial-gradient to create the illusion of a transparent, curved shape. Radial-gradient allows you to define a gradient that starts from a specific point and radiates outward.

The CSS:

.box {
  width: 200px;
  height: 100px;
  background: white;
}
.box .top {
  height: 100px;
  width: 150px;
  transform: translateY(-100%);
  background: #fff;
  position: relative;
}

.top:before,
.top:after {
  content: "";
  position: absolute;
  top: 0;
  width: 50px;
  left: 100%;
  bottom: 50%;
  background:
    radial-gradient(100% 50% at top left, #fff 98%, transparent 100%) right,
    radial-gradient(100% 50% at bottom right, transparent 98%, #fff 100%) left;
  background-size: 50% 100%;
  background-repeat: no-repeat;
}

.top:after {
  transform-origin: bottom;
  transform: scaleY(-1);
}

Explanation

The .box element serves as the container for the curved shape. Within it, the .top element is positioned absolutely and translated upwards (-100%) to create the shape.

The .top element has two pseudo-elements (::before and ::after) that create the curved effect using radial-gradient. These pseudo-elements are positioned at the top-left and bottom-right corners of the .top element, with a width of 50px.

The radial-gradients are defined to start from the top-left and bottom-right corners, respectively. The first gradient creates a white (opaque) section on the right, fading into transparent 2% above the bottom edge. The second gradient does the opposite, creating a transparent section on the left and a white section at the bottom.

By combining these gradients, the illusion of a transparent, curved shape is created.

The above is the detailed content of How to Create a Transparent Curved Shape with Rounded Sides Using CSS Radial-gradient?. For more information, please follow other related articles on the PHP Chinese website!