css3 画一个曲线 |css用来做什么

.curve{
border-radius: 50%;
background-color: #3498db;
width: 300px;
height: 150px;
position: relative;
}
.curve::before,
.curve::after{
content: '';
position: absolute;
width: 10px;
height: 100px;
background-color: #fff;
transform: rotate(45deg);
}
.curve::before{
top: 25px;
left: -5px;
}
.curve::after{
top: 25px;
right: -5px;
}

以上是实现曲线效果的CSS3代码，主要利用border-radius属性设置元素为圆形，再利用伪元素before和after绘制两个角度为45度的矩形，最后再通过position属性对两个矩形进行定位。