CSS inner rounded base radius

Question

I want to create a shape with a lower rounded corner like this -

How can I achieve this with CSS?

Answer 1

SVG-based approaches:

CSS may not be the best way to create such shapes. You should use SVG instead.

1- Use pathItem:

We can use SVG pathto create this shape and fill it with color, gradient or pattern.

path d. , .

:

<path d="M0,0 0,20
         Q25,25 50,50
         Q75,25 100,25
         L100,0 Z" />

4 path. :

• M . , .
• Q .
• L .
• Z .

:

svg {
  width: 100%;
}

<svg width="100" height="50" viewBox="0 0 100 50" preserveAspectRatio="none">
  <path d="M0,0 0,20
           Q25,25 50,50
           Q75,25 100,25
           L100,0 Z" fill="brown" />
</svg>

Hide result

---

2- Clipping:

Clipping .

SVG clipPath . , , .

:

<defs>
    <clipPath id="shape">
      <path d="M0,0 0,20
               Q25,25 50,50
               Q75,25 100,25
               L100,0 Z" />
    </clipPath>
</defs>
<rect x="0" y="0" width="100" height="50" fill="brown" clip-path="url(#shape)"/>

• defs / SVG.
• clipPath .
• rect .
• clip-path , .

:

svg {
  width: 100%;
}

<svg width="100" height="50" viewBox="0 0 100 50"
     preserveAspectRatio="none">
  <defs>
    <clipPath id="shape">
      <path d="M0,0 0,20
               Q25,25 50,50
               Q75,25 100,25
               L100,0 Z" />
    </clipPath>
  </defs>
  <rect x="0" y="0" width="100" height="50" fill="brown" clip-path="url(#shape)"/>
</svg>

Hide result

---

CSS:

1- :

• 2 <div> .
• ::before ::after height border-radius.

• CSS3 rotate().

• box-shadow , .

:

:

.container {
  position: relative;
  overflow: hidden;
  height: 80px;
}

.left,
.right {
  position: relative;
  overflow: hidden;
  height: 100%;
  float: left;
  width: 50%;
}
.right {
  float: right;
}

.left:before,
.right:before {
  box-shadow: 0 0 0 150px brown;
  transform-origin: left bottom;
  transform: rotate(-3deg);
  border-radius: 100%;
  position: absolute;
  bottom: -70px;
  height: 100px;
  content: '';
  width: 200%;
  left: -10%;
}

.left:before {
  transform-origin: right bottom;
  transform: rotate(3deg);
   right: -10%;
  left: auto;
}

<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

Hide result

---

:

• CSS3 Transforms: , MDN
• SVG: , MDN