怎么用css画出曲线

在Web页面上，我们常常需要用到各种曲线，如圆弧、贝塞尔曲线等。如何用CSS画出这些曲线呢？下面就介绍几种CSS绘制曲线的方式。

/* 画圆弧 */.div {
    width: 100px;
    height: 100px;
    border: 2px solid red;
    border-radius: 50%;
    overflow: hidden;
}
/* 画正弦曲线 */.div:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-right-color: red;
    transform: rotate(-45deg);
    animation: wave 2s infinite;
}
@keyframes wave {
0% {
    transform: translateX(0);
}
100% {
    transform: translateX(100px) rotate(-45deg);
}
}
/* 画贝塞尔曲线 */.div:after {
    content: '';
    position: absolute;
    top: 60px;
    left: 200px;
    width: 300px;
    height: 100px;
    border: 1px solid red;
    border-radius: 50%;
    transform: rotate(-45deg);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    clip-path: polygon(0 0, 20% 100%, 80% 100%, 100% 0);
}
    

以上就是三种用CSS绘制曲线的方式，其中圆弧使用了border-radius属性，正弦曲线用了伪元素和动画，贝塞尔曲线用了border-radius、clip-path和transform属性。使用这些方式，可以很方便地画出各种曲线。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！