[分享]css做一小段弧线

在网页设计中，弧线可以增加页面的美观度和艺术感。而CSS是网页设计中常用的样式表语言，可以实现弧线的效果。.wavedline { width: 250px; height: 50px; border...

在网页设计中，弧线可以增加页面的美观度和艺术感。而CSS是网页设计中常用的样式表语言，可以实现弧线的效果。

.waved-line {
  width: 250px;
  height: 50px;
  border-radius: 50px 0 0 50px;
  background-color: #0077cc;
  transform: skewX(-30deg);
} 

在上面的代码中，我们使用了border-radius属性来设置边框的圆角，其中50px表示的是圆角程度。这里我们使用了四个参数来分别设置四个角，变成一个半圆角。由于我们需要实现一条波浪线的效果，需要将其中两个角设置为0，而另外两个则将其设置为半圆角。

接着，在background-color属性中设置了背景色为蓝色。为了让它变成弧形，我们使用了CSS3新特性transform属性中的skewX()方法。这个方法可以使元素绕X轴倾斜，从而得到弧形的效果。

最终的效果如下：

当然，我们也可以根据自己的需求来设置弧线的大小、颜色等参数，从而得到不同的弧线效果。