css中创建弧形线段

最近有朋友问到如何用css实现图中的弧形线段。

答案：使用svg

其实，要制作弧形线段，css本身并不合适。相反，我们可以使用svg（可缩放矢量图形）。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

立即学习“前端免费学习笔记（深入）”；

以下是实现该弧形线段的svg代码：

<?xml version="1.0" encoding="utf-8"?>
<svg width="500px" viewBox="0 0 100 30" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#778ecb"/>
      <stop offset="50%" stop-color="#bccdee"/>
      <stop offset="100%" stop-color="#778ecb"/>
    </linearGradient>
  </defs>
  <path stroke-width="10" stroke-linecap="round" fill="none" stroke="url(#gradient)" d="M 10 10 a 100 150 0 0 0 80 0"/>
</svg>

把这段代码放到一个html文档中，就可以看到弧形线段了。

使用svg创建弧形线段的优点在于可以实现更灵活的自定义，例如：

• 调整弧线的长度
• 改变弧线的颜色
• 添加渐变效果