正方形
1. 宽高相等法
最直接的方式，通过设置相同宽高值实现：
.square {
width: 100px;
height: 100px;
background: #3498db;
}
适用场景：静态布局、简单色块。
2. 边框法（Border）
利用边框厚度构建正方形，适合无内容容器：
.square-border {
width: 0;
height: 0;
border: 50px solid #e74c3c; /* 边长=2×边框宽度 */
}
特点：无需内容支撑，但无法添加内部元素。
3. 内边距比例法（Padding）
结合padding与相对定位，实现响应式正方形：
.square-padding {
width: 50%; /* 宽度基于父容器 */
padding-bottom: 50%; /* 高度=宽度 */
position: relative;
background: #2ecc71;
}
优势：自适应父容器宽度，适合响应式设计。
4. 视口单位法（vw）
直接使用视口单位动态计算尺寸：
.square-vw {
width: 50vw; /* 视口宽度一半 */
height: 50vw; /* 高度与宽度相等 */
background: #9b59b6;
}
适用场景：全屏背景块、Banner区域。
5. Flex布局法
通过Flex容器控制子元素比例：
.container {
display: flex;
width: 200px;
}
.square-flex {
flex: 1; /* 宽度自适应 */
aspect-ratio: 1; /* 宽高比1:1 */
background: #f1c40f;
}
兼容性：需浏览器支持aspect-ratio属性（现代浏览器均支持）。
三角形
一、Border 边框法（最常用）
原理：通过设置元素的宽高为 0，利用透明边框相交形成三角形。
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent; /* 左侧边框透明 */
border-right: 50px solid transparent; /* 右侧边框透明 */
border-bottom: 100px solid red; /* 下边框显示颜色 */
}
• 关键属性：width: 0; height: 0; + border-* 组合
• 方向控制：
• 向上：border-bottom 有颜色，其他透明
• 向下：border-top 有颜色，其他透明
• 向左/右：设置对应边框颜色（如左三角形：border-right 有颜色）
• 优点：兼容性极佳（包括 IE8+），代码简单
• 缺点：无法在三角形内部添加内容
等腰直角三角形：
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid lightblue;
border-bottom: 50px solid lightblue;
border-top: 50px solid transparent;
}
原理
构建一个正方形为正方形添加不同方向的边框将正方形的宽高设置为0设置三个边框为透明
// 1
.triangle {
width: 50px;
height: 50px;
background-color: red;
}
// 2
.trangle {
// ....
border-left: 50px solid yellow;
border-right: 50px solid green;
border-bottom: 50px solid lightblue;
border-top: 50px solid pink;
}
// 3
.trangle {
// ....
width: 0;
height: 0;
}
// 4
.trangle {
// ....
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid transparent;
border-top: 50px solid pink;
}
二、Clip-Path 裁剪法
原理：通过裁剪元素的可见区域形成三角形。
.triangle {
width: 100px;
height: 100px;
background: red;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%); /* 定义三个顶点坐标 */
}
• 关键属性：clip-path: polygon(x1 y1, x2 y2, x3 y3)
• 方向控制：调整坐标点顺序（如 polygon(0% 0%, 100% 50%, 0% 100%) 为右三角形）
• 优点：支持任意形状，容器可添加内容，响应式自适应
• 缺点：低版本浏览器兼容性差（如 IE 不支持）
三、渐变法（Linear/Conic Gradient）
原理：利用线性或角向渐变的颜色断点生成三角形。
.triangle {
width: 100px;
height: 100px;
background: linear-gradient(45deg, red 50%, transparent 50%);
}
• 关键属性：linear-gradient() 或 conic-gradient()
• 方向控制：调整渐变角度（如 to bottom right）或颜色断点位置
• 优点：支持复杂渐变效果，容器保留原有尺寸
• 缺点：实现复杂度高，需调试角度和断点
四、字符法（特殊场景）
原理：使用 Unicode 字符直接显示三角形符号。
.triangle {
font-size: 50px;
color: red;
}
• 关键属性：font-family + Unicode 字符（如 ▲ ▼ ◀ ▶）
• 优点：无需 CSS 绘制
• 缺点：依赖字体库，样式控制有限
方案对比与选型建议
方法兼容性灵活性内容支持适用场景Border 边框法⭐⭐⭐⭐⭐⭐❌简单箭头、工具提示Clip-Path⭐⭐⭐⭐⭐✅复杂形状、响应式设计渐变法⭐⭐⭐⭐⭐✅渐变效果、背景装饰字符法⭐⭐⭐⭐❌✅快速实现、无需精确控制推荐优先级：
Border 边框法（兼容性强，代码简洁）Clip-Path 法（现代项目首选，灵活易维护）渐变法（特殊视觉效果需求）
注意事项
• 等边三角形：需计算边框宽度比例（如底边 100px，左右边框 ≈87px）
• 性能优化：避免频繁使用 clip-path 或渐变，可能导致渲染性能下降
• 浏览器前缀：部分属性需加 -webkit- 前缀（如 clip-path）