How Can I Create Transparent Curved Shapes with Rounded Sides Using CSS?

Creating Transparent Curved Shapes with Rounded Sides in CSS

The creation of curved shapes in CSS can be challenging, especially when aiming for transparency. This article explores a method to achieve this using CSS, addressing the issue of non-transparent backgrounds.

The Challenge:

You may encounter a scenario where you wish to create a transparent curved shape similar to the one depicted in the provided image. However, your current approach using traditional CSS techniques results in an opaque background, as seen in the result screenshot.

The Solution:

To resolve this issue, we present a solution involving radial-gradient. By utilizing two radial-gradients positioned strategically, we can create the illusion of a transparent curved shape with rounded sides.

Implementation:

.box {
  margin-top:120px;
  width:200px;
  height:100px;
  background:white;
}

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

.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);
}

body {
  background:pink;
}

In this code snippet, the '.top' element represents the curved shape. The radial-gradients positioned before and after this element create the rounded sides and transparency. The 'transform: scaleY(-1)' property flips the after pseudo-element vertically, creating the symmetrical shape.

Improved Implementation:

For a more user-friendly way of adjusting the curve, consider using the solution provided by https://css-shape.com/inner-curve/. This website allows you to customize various aspects of the curve shape, making it easy to achieve the desired effect.

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