Inner rounded bottom radius using CSS

Question

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

How could i achieve this task using CSS?

Answer 1

SVG Based Approaches:

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

1- Using path Element:

We can use SVG's path element to create this shape and fill it with some color, gradient or pattern.

Only one attribute d is used to define shapes in path element. This attribute itself contains a number of short commands and few parameters that are necessary for those commands to work.

Below is the necessary code to create this shape:

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

I've used 4 commands inside path element. Below is a brief description:

• M command is used to define the starting point. It appears at the beginning and specify the point from where drawing should start.
• Q command is used to draw curves.
• L command is used to draw straight lines.
• Z command is used to close the current path.

Working Example:

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>

---

2- Clipping:

Clipping means removing or hiding some parts of an element.

In this approach, we define a clipping region by using SVG's clipPath element and apply this to a rectangular element. Any area that is outside the clipping region will be hidden.

Below is the necessary code:

<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 element is used to define element / objects for later use in SVG document.
• clipPath element is used to define a clipping region.
• rect element is used to create rectangles.
• clip-path attribute is used to link the clipping path created earlier.

Working Example:

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>

---

CSS Based Approach:

1- Using Rotated Pseudo Elements with Large Box-Shadow Values:

1. Create 2 <div> elements inside a parent element.
2. Use ::before or ::after pseudo element to draw overlays of small height and border-radius.

3. Apply a few degree rotation with CSS3 rotate() transformation.

4. Apply large box-shadow values and adjust them to look like the final shape.

Output Image:

Working Example:

.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>

---

Useful Resources:

• CSS3 Transforms: Specs, MDN
• SVG: Specs, MDN