When we need a rounded edge we can use border-radius. But what if we need create a div with a curved bottom?

CSS clip-path

If we read CSS clip path api doc. We will find that we can crop a div into any shape we want with path

clip-path: circle(40%);
clip-path: path('M 0 200 L 0,75 A 5,5 0,0,1 150,75 L 200 200 z');

Understand svg path

If you copy this path into this svg-path-editor we can visualize the shape of it.

  m 0 0 v 305.867 c 114 30 229 30 343 0 V 0 Z   

The only problem is what are all those number means. You can drag the control points a little. Then you will find they are nothing but the coordinates of 2d points.

Write a basic example

If you have realized that those numbers in the path is just coordinates, then we can start write our example

  
<template>
   <div 
     class="demo"
     :style="{ 'clip-path': path('m 0 0 v 100 c 70 30 140 30 210 0 V 0 Z')}"
     >
     <p :style="{'padding': '12px'}">hi</p>
   </div>
 </template>
  
<style scoped>
 .demo {
   background-color: orange;
   height: 150px;
   width: 210px;
 }
 </style>
  

The Code of first example

Code

If you find this article useful, maybe you can buy my calculator for $0.99? It is a calculator that can change layout. So you can only keep the buttons you prefer. -> App Store