CSS transparent curved shape with two rounded sides

by

Here is an idea using radial-gradient

.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;
}
<div class="box">
<div class="top"></div>
</div>

To better understand the trick here is the curved shape alone with different colors:

.top {
  height:100px;
  width:100px;
  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, red 98%,blue 100%) right,
    radial-gradient(100% 50% at bottom right, purple 98%,green 100%) left;
  background-size:50% 100%;
  background-repeat:no-repeat;
  outline:2px solid;
}
.top:after {
  transform-origin:bottom;
  transform:scaleY(-1);
}
body {
  background:pink;
}
<div class="top"></div>

And here is an SVG solution where I will simply replace the gradient with an SVG

.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{
  content:"";
  position:absolute;
  top:0;
  width:50px;
  left:100%;
  bottom:0;
  background:url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version='1.1' viewBox='0 0 64 64' width="64" height="64" preserveAspectRatio='none' fill="white"><path d='M0 0 L0 64 L64 64 C64 40 0 56 0 32 C0 8 64 24 64 0 Z' /></svg>");
  background-size:100% 100%;
}
body {
  background:pink;
}
<div class="box">
<div class="top"></div>
</div>

You can optimize the code and use only one element:

.box {
  width:200px;
  height:200px;
  background:
    radial-gradient(100% 50% at top     left, #fff 98%,transparent 100%) top 0    right 0   /30px 50px,
    radial-gradient(100% 50% at bottom right, transparent 98%,#fff 100%) top 0    right 30px/30px 50px,
    radial-gradient(100% 50% at bottom  left, #fff 98%,transparent 100%) top 50px right 0   /30px 50px,
    radial-gradient(100% 50% at top    right, transparent 98%,#fff 100%) top 50px right 30px/30px 50px,
    linear-gradient(#fff,#fff) bottom/100% calc(100% - 100px),
    linear-gradient(#fff,#fff) left  /calc(100% - 60px) 100%;
  background-repeat:no-repeat;
}

body {
  background:pink;
}
<div class="box">
</div>

And with the SVG:

.box {
  width:200px;
  height:200px;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version='1.1' viewBox='0 0 64 64' width="64" height="64" preserveAspectRatio='none' fill="white"><path d='M0 0 L0 64 L64 64 C64 40 0 56 0 32 C0 8 64 24 64 0 Z' /></svg>") top right/60px 100px,
    linear-gradient(#fff,#fff) bottom/100% calc(100% - 100px),
    linear-gradient(#fff,#fff) left  /calc(100% - 60px) 100%;
  background-repeat:no-repeat;
}

body {
  background:pink;
}
<div class="box">
</div>

You can add some CSS variable to control everything easily:

.box {
  --w:60px;  /*width of the curve */
  --h:100px; /*height of the curve */
  --t:0px;   /*offset from top */

  width:150px;
  height:150px;
  display:inline-block;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version='1.1' viewBox='0 0 64 64' width="64" height="64" preserveAspectRatio='none' fill="white"><path d='M0 0 L0 64 L64 64 C64 40 0 56 0 32 C0 8 64 24 64 0 Z' /></svg>") top var(--t) right 0/var(--w) var(--h),
    
    linear-gradient(#fff,#fff) top   /100% var(--t),
    linear-gradient(#fff,#fff) bottom/100% calc(100% - var(--h) - var(--t)),
    linear-gradient(#fff,#fff) left  /calc(100% - var(--w)) 100%;
  background-repeat:no-repeat;
}

body {
  background:pink;
}
<div class="box"></div>

<div class="box" style="--t:20px;--w:50px;--h:80px"></div>

<div class="box" style="--t:20px;--w:80px;--h:130px"></div>

CSS inner curved transparent shape

Another idea using mask in case you want to conside a random background. Simply place the background inside the mask definition:

.box {
  width:200px;
  height:200px;
  -webkit-mask:
    radial-gradient(100% 50% at top     left, transparent 98%,#fff 100%) top 0    right 0   /30px 50px,
    radial-gradient(100% 50% at bottom right, #fff 98%,transparent 100%) top 0    right 30px/30px 50px,
    radial-gradient(100% 50% at bottom  left, transparent 98%,#fff 100%) top 50px right 0   /30px 50px,
    radial-gradient(100% 50% at top    right, #fff 98%,transparent 100%) top 50px right 30px/30px 50px,
    linear-gradient(#fff,#fff);
  -webkit-mask-composite:destination-out;
  mask-composite:exclude;
  -webkit-mask-repeat:no-repeat;
  background:linear-gradient(red,blue);
}

body {
  background:pink;
}
<div class="box">
</div>

With the SVG syntax

.box {
  --w:60px;  /*width of the curve */
  --h:100px; /*height of the curve */
  --t:0px;   /*offset from top */

  width:150px;
  height:150px;
  display:inline-block;
  -webkit-mask:
    url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version='1.1' viewBox='0 0 64 64' width="64" height="64" preserveAspectRatio='none' fill="white"><path d='M0 0 L0 64 L64 64 C64 40 0 56 0 32 C0 8 64 24 64 0 Z' /></svg>") top var(--t) right 0/var(--w) var(--h),
    
    linear-gradient(#fff,#fff) top   /100% var(--t),
    linear-gradient(#fff,#fff) bottom/100% calc(100% - var(--h) - var(--t)),
    linear-gradient(#fff,#fff) left  /calc(100% - var(--w)) 100%;
  mask:
    url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version='1.1' viewBox='0 0 64 64' width="64" height="64" preserveAspectRatio='none' fill="white"><path d='M0 0 L0 64 L64 64 C64 40 0 56 0 32 C0 8 64 24 64 0 Z' /></svg>") top var(--t) right 0/var(--w) var(--h),
    
    linear-gradient(#fff,#fff) top   /100% var(--t),
    linear-gradient(#fff,#fff) bottom/100% calc(100% - var(--h) - var(--t)),
    linear-gradient(#fff,#fff) left  /calc(100% - var(--w)) 100%;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  background:linear-gradient(red,blue);
}

body {
  background:pink;
}
<div class="box"></div>

<div class="box" style="--t:20px;--w:50px;--h:80px"></div>

<div class="box" style="--t:20px;--w:80px;--h:130px"></div>

CSS inner curver gradient shape

More Related Contents:

  1. Transparent arrow/triangle indented over an image
  2. Transparent text cut out of background
  3. Invert rounded corner in CSS?
  4. Transparent hollow or cut out circle
  5. Wave (or shape?) with border on CSS3
  6. Triangle shape with background image
  7. How to create a curve on the top of a background?
  8. Outlining and partially filling an SVG Shape
  9. Filling water animation
  10. Transparent hollow or cut out shape in HTML
  11. Double curved shape
  12. How do CSS triangles work?
  13. Line before and after title over image [duplicate]
  14. SVG data image not working as a background-image in a pseudo element
  15. CSS Only Pie Chart – How to add spacing/padding between slices?
  16. Why does order of transforms matter? rotate/scale doesn’t give the same result as scale/rotate
  17. How to draw a circle with text in the middle?
  18. Is there a way to use SVG as content in a pseudo element ::before or ::after
  19. How to animate handwriting text on the web page using SVG?
  20. Responsive CSS Trapezoid Shape
  21. Hexagon shape with CSS3
  22. Is a concave border radius possible?
  23. Align text on slanted line
  24. Can I change the fill color of an svg path with CSS?
  25. SVG in img element proportions not respected in ie9
  26. Border within border CSS
  27. Half hexagon shape with one element
  28. Tint image using CSS without overlay
  29. Why don’t CSS filters work on SVG elements in Chrome?
  30. how to handle ‘double opacity’ of two overlapping divs

Leave a Comment