如何使用CSS3实现梯形与三角形组合的页面重复背景效果

核心原理 #

你当前使用的单断点线性渐变只能生成尖角三角形，要实现梯形效果只需给线性渐变新增2个连续色标，将三角形的尖角部分“削平”，再搭配多层渐变叠加填充空隙，就能实现目标组合效果。

可直接运行的示例代码 #

body {
  /* 基础底色，可根据需求替换为参考图对应底色 */
  background-color: #f8fafc;
  background-image: 
    /* 左向斜边梯形层 */
    linear-gradient(319deg, #1e293b 16px, #1e293b 22px, transparent 23px),
    /* 右向斜边梯形层 */
    linear-gradient(39deg, #3b82f6 16px, #3b82f6 22px, transparent 23px),
    /* 补空隙的三角形装饰层，可按需调整颜色、位置 */
    linear-gradient(319deg, #e2e8f0 24px, transparent 25px),
    linear-gradient(39deg, #e2e8f0 24px, transparent 25px);
  background-size: 54px 46px;
  background-repeat: repeat;
}

自定义调整说明 #

• 修改各linear-gradient中的色值即可匹配参考图的色彩搭配
• 调整色标对应的像素数值，可以修改梯形的高度、斜边的倾斜角度
• 调整background-size参数可以控制背景图案的重复密度
• 如果需要更复杂的拼接效果，可新增不同偏移量、不同颜色的渐变层，搭配background-position调整各层对齐位置即可

内容的提问来源于stack exchange，提问作者Daniel Kopťák