HTML怎么做几何背景图案_html CSS几何图案背景生成教程

纯 CSS 可生成几何背景：简单形状用 border/border-radius（如三角形设宽高为0、单边实色边框，圆形设等宽高加50%圆角），重复图案用多层 linear-gradient 拼斜纹或菱形网格，复杂动态图形才需 canvas 绘制。

直接用 CSS 就能生成几何背景图案，不需要图片、不依赖 JS，关键在于选对方法：简单形状用 border 或 border-radius，重复图案用 linear-gradient，复杂或动态图形才上 canvas。

用 border 和 border-radius 画基础几何形

三角形、圆、椭圆这些最常用，纯 CSS 实现，零请求、高兼容。核心是控制尺寸归零 + 边框/圆角组合。

• 三角形：设 width: 0; height: 0;，只留一个方向的 border（如 border-bottom: 20px solid red;），其余三边为 transparent
• 圆形：元素宽高等值，加 border-radius: 50%;；椭圆只需宽高不等
• 爱心这类组合形，本质是两个半圆（border-radius: 50% 50% 0 0）+ 一个倒三角（border-top 配透明边框），注意父容器需 overflow: hidden 裁切多余部分

用 linear-gradient 拼条纹、菱形、网格

这是生成可缩放、响应式几何背景最实用的方式，原理是用多层渐变叠加出线条或交点，background-size 控制密度。

• 45° 斜条纹：background-image: linear-gradient(45deg, #000 25%, transparent 25%), linear-gradient(-45deg, #000 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #000 75%), linear-gradient(-45deg, transparent 75%, #000 75%); background-size: 20px 20px;
• 菱形网格：把上面的 25% 改成 50%，再调小 background-size（如 10px 10px），就能得到紧密排列的菱形交点
• 性能提示：避免写太多层渐变（超过 4 层易卡顿），移动端慎用 background-attachment: fixed

用 canvas 动态生成不规则几何背景

当需要随机多边形、粒子化边形、随滚动变形的背景时，canvas 是唯一可靠选择。但注意它不参与 CSS 流式布局，且需手动适配 DPR。

立即学习“前端免费学习笔记（深入）”；

• 必须先获取上下文：const ctx = canvas.getContext('2d');，再用 beginPath() + moveTo() + lineTo() 构建路径
• 绘制后记得调用 fill() 或 stroke()，否则什么都不会显示
• 响应式陷阱：canvas 的 width/height 属性值 ≠ CSS 样式宽高，缩放会导致模糊；正确做法是监听 window.devicePixelRatio，重设 canvas 像素尺寸并重绘

最容易被忽略的是层级和渲染时机：CSS 几何背景若放在 body 上，得确认它没被其他绝对定位元素遮挡；canvas 背景若依赖 DOM 尺寸，务必等 DOMContentLoaded 后再初始化，否则取到的宽高可能是 0。