如何在容器中实现自定义粗细渐变分割线？

可以用CSS的clip-path属性快速实现这种梯形分割线效果，代码示例如下：

HTML结构 #

<div class="thickening-divider"></div>

CSS样式 #

.thickening-divider {
  /* 分割线的长度和最大厚度 */
  width: 200px;
  height: 4px;
  /* 分割线颜色 */
  background-color: #333;
  /* 裁剪出左细右粗的梯形形状 */
  clip-path: polygon(0 97.5%, 0 2.5%, 100% 0%, 100% 100%);
}

如果需要左粗右细的效果，只需要调整clip-path的参数：

clip-path: polygon(0 0%, 0 100%, 100% 2.5%, 100% 97.5%);

另外也可以用线性渐变的方式实现，适合需要渐变颜色的场景：

.thickening-divider {
  width: 200px;
  height: 4px;
  background: linear-gradient(to bottom right, transparent 50%, #333 50%);
}

内容的提问来源于stack exchange，提问作者Samet Demirtop