Search code examples
csssvgcss-shapes

CSS transparent curved shape with two rounded sides

I'm trying to create inner curved transparent shape,like this

curved shape menu

but i have trouble with creating this kind of curved shape,this is what i am done`

body {
  background-color: #00a4ffb3;
}

.parent_wrapper {
  height: 250px;
  width: 250px;
  position: relative;
  background-color: white;
}

.tab-indicator {
  position: absolute;
  background-color: #000000;
  width: 50px;
  height: 60px;
  border-radius: 50px 0 0 50px;
  z-index: 1;
  transform: translateY(0px);
  right: 0px;
  transition: transform .3s ease-out;
}

.tab-indicator .tab-indicator-left,
.tab-indicator .tab-indicator-right {
  background-color: #000000;
  height: 25px;
  width: 25px;
  position: absolute;
}

.tab-indicator .tab-indicator-left {
  right: 0;
  bottom: -24px;
}

.tab-indicator.data-white .tab-indicator-left:after,
.tab-indicator.data-white .tab-indicator-right:after {
  background-color: #F3F3F3;
}

.tab-indicator .tab-indicator-left:after {
  width: 100%;
  height: 100%;
  margin-top: 1px;
}

.tab-indicator .tab-indicator-left:after,
.tab-indicator .tab-indicator-right:after {
  content: "";
  display: block;
  background-color: #F3F3F3;
}

.tab-indicator .tab-indicator-left:after {
  border-radius: 0 25px 0 0;
}

.tab-indicator .tab-indicator-left,
.tab-indicator .tab-indicator-right {
  background-color: #000000;
  height: 25px;
  width: 25px;
  position: absolute;
}

.tab-indicator .tab-indicator-right {
  right: 0;
  top: -24px;
}

.tab-indicator .tab-indicator-right:after {
  width: 100%;
  height: 100%;
  margin-top: -1px;
}

.tab-indicator .tab-indicator-right:after {
  border-radius: 0px 0px 25px 0px;
}
<div class="parent_wrapper">
  <div class="tab-indicator data-white" style="transform: translateY(25px);">
    <div class="tab-indicator-left"></div>
    <div class="tab-indicator-right"></div>
  </div>
</div>

https://jsfiddle.net/vis143/s9oz31df/1/

but the background is not transparent (means i just want to see the background color[ie,blue color])..

Result

is any way to do this using svg or css .... please help

Solution

  • I created a better implementation that you can find here: https://css-shape.com/inner-curve/

    Pick the side, adjust the different variables then copy the CSS.

    CSS only inner curve/notch

    Old answer

    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