[分享]css中怎么实现一条弧线

CSS 中如何实现一条弧线呢？

.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 4px solid #000000;
} 

上面的代码可以实现一个简单的圆形，但如果想要实现弧线，需要使用CSS的border-属性。

.arc {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border-top: 4px solid #000000; /*上边框*/
  border-right: 4px solid transparent; /*右边框*/
  border-bottom: none; /*底边框*/
  border-left: none; /*左边框*/
} 

上面的代码就实现了一个半圆形，并且可以控制弧线的宽度、颜色和方向。

如果想要实现更复杂的曲线，可以使用border-radius属性，通过不同的数值来实现不同的曲线。

.wave {
  width: 100px;
  height: 50px;
  border-bottom-left-radius: 50px 15px; /*左下*/
  border-bottom-right-radius: 50px 15px; /*右下*/
  border-top: 4px solid #000000; /*上边框*/
} 

上面的代码通过设置不同的数值来实现了一个波浪形曲线。

CSS 的弧线实现方式还有很多，希望以上代码可以给大家带来一些灵感。