css画贝赛尔曲线 |css 尖角 指示

// 设置贝赛尔曲线的路径
.curve {
border-radius: 50%;
width: 200px;
height: 200px;
background-color: #f2c9c9;
position: relative;
}
.point {
width: 20px;
height: 20px;
border: 1px solid #333;
background-color: #fff;
border-radius: 50%;
position: absolute;
}
.control {
width: 10px;
height: 10px;
border: 1px solid #333;
background-color: #fff;
border-radius: 50%;
position: absolute;
z-index: 1;
}
.curve .point:nth-of-type(1){
left: 0;
top: 100px;
}
.curve .point:nth-of-type(2){
right: 0;
top: 100px;
}
.curve .control:nth-of-type(1){
left: -5px;
top: 90px;
}
.curve .control:nth-of-type(2){
right: -5px;
top: 110px;
}
// 绘制贝赛尔曲线
.curve:before,
.curve:after {
content: '';
border-radius: 50%;
width: 20px;
height: 20px;
background-color: #333;
position: absolute;
z-index: 1;
transform: translate(-50%, -50%);
}
.curve:before {
left: 0;
top: 100px;
}
.curve:after {
right: 0;
top: 100px;
}
.curve path {
stroke-width: 3px;
stroke: #333;
fill: none;
}

以上代码是根据贝赛尔曲线的公式来画出的曲线，大家先在HTML中设置好点和控制点，再用CSS设置点和控制点的样式和位置，最后通过绘制曲线的样式来实现整条曲线的绘制。

通过以上代码的设置，大家可以看到一个贝赛尔曲线，它是由两个点和两个控制点组成的。如果你想要更改它的形状，可以调整控制点的位置来达到想要的效果。