css3背景斜线

在CSS3中，我们可以使用背景线性渐变创建斜线背景。

  .slanted-bg {
    background: linear-gradient(to right bottom,#ff6b6b 0%,#6b6bff 100%);
    transform: skewY(-8deg);
    height: 300px;
  }

该代码会创建一个向右下方倾斜的背景线性渐变，颜色从红色到蓝色渐变。在这个例子中，我们还使用了transform属性来使元素旋转倾斜，以使斜线更为明显。

我们还可以使用多个背景来创建不同方向的斜线。

  .diagonal-bg {
    background: linear-gradient(-225deg,#a445b2 0%,#d41872 52%,#ff0066 100%),linear-gradient(45deg,#00C9FF 0%,#92FE9D 100%);
    background-size: 100% 100%;
    background-position: right bottom;
    height: 300px;
  }

这个代码将创建两个不同方向的线性渐变背景，一个从左上角到右下角，另一个从左下角到右上角。background-size属性设置背景图像的大小为100% 100%，background-position属性使背景图像从右下角开始。这将创建一个漂亮的斜线背景。

总之，使用CSS3可以轻松创建各种样式的斜线背景，并且不仅仅是基本的45度斜线。通过结合不同的渐变和变换，你可以创建许多定制的斜线背景。