如何使用CSS clip-path创建两端带有圆形的直线？

完全可以使用CSS clip-path实现该效果，不过要注意基础clip-path图形无法直接拼接出目标形状，需要用路径函数绘制完整的闭合裁切区域。

clip-path 实现代码 #

你需要将裁切路径拆分为「中间矩形段+两端等半径半圆」拼接为闭合图形，以200px长、8px粗的直线为例，代码如下：

.rounded-line {
  width: 200px;
  height: 8px;
  background: #2196f3;
  /* 半圆半径为线粗的1/2即4px，路径坐标匹配元素宽高 */
  clip-path: path('M4 0h192a4 4 0 0 1 0 8H4a4 4 0 0 1 0-8z');
}

如果调整线粗、线长，同步修改路径里的半径值、横向长度值即可。

更简便的替代实现（推荐） #

如果不需要强制使用clip-path，有兼容性更好、代码更简洁的原生方案可以实现一模一样的效果：

• 圆角方案：直接给矩形元素设置为高度1/2的圆角即可

.rounded-line {
  width: 200px;
  height: 8px;
  background: #2196f3;
  border-radius: 4px; /* 数值等于元素高度的1/2 */
}

• 线帽方案：如果是用边框、SVG线条实现，直接设置圆形线帽属性即可

/* 用边框实现的示例 */
.rounded-line {
  width: 200px;
  border-top: 8px solid #2196f3;
  border-radius: 4px;
}

多数人用clip-path实现失败的核心原因：仅使用inset、circle等基础裁切图形拼接，没有绘制完整的闭合路径，或是路径里的半圆半径和直线高度不匹配，导致端点变形、裁切不全。

内容的提问来源于stack exchange，提问作者Dele Olorunsola