An Interest In:
Web News this Week
- April 29, 2024
- April 28, 2024
- April 27, 2024
- April 26, 2024
- April 25, 2024
- April 24, 2024
- April 23, 2024
How to create a div with a curved bottom
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
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
Original Link: https://dev.to/arnosolo/how-to-create-a-div-with-a-curved-bottom-4i6l
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To