css中把斜线改成直线

CSS中可以使用transform: skew()属性来改变一个元素的倾斜角度，但由于倾斜角度太大时，斜线会变得非常难看，因此我们需要把斜线改成直线。

.wrapper {
  position: relative;
  width: 200px;
  height: 200px;
  border: 1px solid #000;
  overflow: hidden;
}

.slash {
  position: absolute;
  top: 50%;
  height: 2px;
  width: 100%;
  background-color: #000;
  transform: skew(-45deg);
}

.slash:before {
  content: "";
  position: absolute;
  height: 100%;
  width: 200%;
  top: 0;
  left: -50%;
  transform: skew(-45deg);
  background-color: #000;
} 

上面的代码会生成一个有边框的200px * 200px的容器，其中有一条黑色水平线段。该水平线段经过transform: skew(-45deg)变形后，成为一个斜线。使用:before伪元素来生成一个与原斜线垂直的斜线，实现斜线变为直线的效果。

此外，我们还可以使用clip-path属性来剪切斜线，实现斜线变为直线的效果：

.straight {
  clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
  height: 2px;
  background-color: #000;
} 

这段代码会生成一条宽度为100%、高度为2px的水平线段，其中clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);属性定义了一个四边形区域，将斜线剪切成一条直线。

以上是两种将斜线变为直线的方法，可以根据具体情况来选择使用。