Home > Web Front-end > CSS Tutorial > How Can I Create Transparent Curved Shapes with Two Rounded Sides Using CSS or SVG?

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

Susan Sarandon
Release: 2024-12-10 08:24:11
Original
116 people have browsed it

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

Creating Transparent Curved Shapes with Two Rounded Sides using CSS

In your attempt to create a transparent inner curved shape, you faced difficulties in achieving the desired transparency. This question highlights the need for understanding transparent curved shape creation techniques in CSS.

Solution Using Radial Gradients

One approach to creating this shape involves utilizing CSS radial-gradients. By defining two radial-gradients and positioning them strategically, you can create the effect of a curved shape with rounded sides:

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

In this code, two :before and :after pseudo-elements are created to form the rounded sides of the shape. The radial gradients allow for a gradual transition between transparent and non-transparent areas, creating the illusion of a curved shape.

Alternative Solution Using SVG

Alternatively, you can utilize SVG (Scalable Vector Graphics) to define the curved shape:

<svg width="200" height="100" viewBox="0 0 200 100">
  <defs>
    <mask>
Copy after login

In this SVG code, a path is defined to create the shape, and a mask is applied to the rectangle to reveal only the desired portion of the shape.

Conclusion

By leveraging CSS radial-gradients or SVG, you can achieve the desired transparent inner curved shape with two rounded sides. The choice between these approaches depends on your preferred method and the complexity of your design.

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

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template