[分享]css两端逐渐变细的直线

在网页设计中，一些排版要求需要使用到直线装饰。CSS提供了多种方式实现直线效果，比如边框、伪元素等等。其中一种比较有趣的方法是使用CSS两端逐渐变细的直线。.line { : relative; he...

在网页设计中，一些排版要求需要使用到直线装饰。CSS提供了多种方式实现直线效果，比如边框、伪元素等等。其中一种比较有趣的方法是使用CSS两端逐渐变细的直线。

.line {
  position: relative;
  height: 1px;
  background-color: #000;
}
.line::before, .line::after {
  content: ';
  position: absolute;
  height: 100%;
  width: 10%;
  background-color: inherit;
  opacity: 1;
}
.line::before {
  left: 0;
  background-color: #f00;
  transform-origin: left;
  transform: scaleX(10);
}
.line::after {
  right: 0;
  background-color: #0f0;
  transform-origin: right;
  transform: scaleX(10);
} 

以上代码实现了一条黑色的直线，两端分别逐渐变细为红色和绿色。其中，.line元素设置了高度和背景颜色。.line::before和.line::after分别是直线两端的伪元素，宽度为10%，高度100%，背景颜色继承自.line元素。

接着，.line::before和.line::after使用了transform属性，将它们的宽度逐渐缩小。transform-origin指定了变形的基准点，分别为左侧和右侧。10倍的初始宽度保证了逐渐变细的效果。

如果需要将直线设置为斜着的，可以使用rotateZ()函数，比如transform: scaleX(10) rotateZ(45deg)。

以上是使用CSS两端逐渐变细的直线的代码和实现方法。它的特点是简单易懂，且可以实现很多样式效果。