Curving the Bottom of a DIV Inward with CSS
To achieve the curved bottom effect as illustrated, one technique involves using border-radius with specific values. Here's how to implement it:
.curved {
margin: 0 auto;
height: 400px;
background: lightblue;
border-radius: 0 0 200px 200px;
}This code creates a rectangular DIV with a rounded bottom edge, as shown:
Transparent Curves
Alternatively, a radial gradient can be employed to create a transparent curve:
body {
background: pink;
}
.container {
margin: 0 auto;
width: 500px;
height: 200px;
background: radial-gradient(110% 50% at bottom, transparent 50%, lightblue 51%);
}This approach results in a semi-transparent blue shape with a curved bottom.
The above is the detailed content of How to Create a Curved Bottom for a DIV Using CSS?. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
