如何用CSS3和HTML5创建网页斜杠分隔线？

巧用CSS3和HTML5打造网页斜杠分割线

本文将介绍几种创建网页斜杠分割线的方法，轻松将页面分割成不同的区域。

方法一：伪元素三角形

利用::before或::after伪元素创建三角形，并通过调整其border-width、border-color和transform属性，实现斜杠效果。

方法二：倾斜变换

创建一个容器元素包含需要分割的内容，然后使用transform: skew()属性对容器进行倾斜变换，控制倾斜角度即可得到斜杠效果。

方法三：渐变色拼接 (推荐)

此方法兼容性好，实现简单。通过linear-gradient()函数创建两个渐变色区域，并分别放置在分割线的两侧。通过调整渐变色的颜色和角度，即可产生斜杠分隔效果。

以下代码示例演示了渐变色拼接方法：

body {
  background: #f0f0f0;
  height: 100vh;
}

.container {
  display: flex;
  height: 100vh;
}

.left,
.right {
  flex: 1;
}

.left {
  background: linear-gradient(135deg, #ffffff 0%, #ffffff 50%, #f0f0f0 50%, #f0f0f0 100%);
}

.right {
  background: linear-gradient(45deg, #f0f0f0 0%, #f0f0f0 50%, #ffffff 50%, #ffffff 100%);
}

选择适合您项目需求的方法，轻松创建出美观的网页斜杠分割线！