How to create a div with a curved bottom

#javascript #webdev #beginners #programming

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