接下来，我们通过一个完整的代码示例，详细了解如何运用CSS边框创建指向不同方向的三角形。这一技巧的核心在于将元素的宽度和高度均设置为0，并通过巧妙地利用边框的渲染机制，来构建出三角形这一独特的形状。
完整示例：CSS三角形实现（所有方向）
这个示例展示了如何使用CSS边框创建不同方向的三角形：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS伪元素实现三角形示例</title>
<style>
:root {
--color-theme: #4a90e2;
}
.container {
display: flex;
justify-content: center;
align-items: center;
gap: 50px;
flex-wrap: wrap;
margin: 50px auto;
max-width: 800px;
}
.triangle {
position: relative;
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
color: #666;
}
/* 向右三角形 */
.triangle-right::before {
content: "";
position: absolute;
width: 0;
height: 0;
border-left: 3.5rem solid var(--color-theme);
border-top: 2.5rem solid transparent;
border-bottom: 2.5rem solid transparent;
z-index: -1;
}
/* 向左三角形 */
.triangle-left::before {
content: "";
position: absolute;
width: 0;
height: 0;
border-right: 3.5rem solid var(--color-theme);
border-top: 2.5rem solid transparent;
border-bottom: 2.5rem solid transparent;
z-index: -1;
}
/* 向上三角形 */
.triangle-up::before {
content: "";
position: absolute;
width: 0;
height: 0;
border-bottom: 3.5rem solid var(--color-theme);
border-left: 2.5rem solid transparent;
border-right: 2.5rem solid transparent;
z-index: -1;
}
/* 向下三角形 */
.triangle-down::before {
content: "";
position: absolute;
width: 0;
height: 0;
border-top: 3.5rem solid var(--color-theme);
border-left: 2.5rem solid transparent;
border-right: 2.5rem solid transparent;
z-index: -1;
}
/* 右上三角形 */
.triangle-top-right::before {
content: "";
position: absolute;
width: 0;
height: 0;
border-bottom: 3.5rem solid var(--color-theme);
border-left: 3.5rem solid transparent;
z-index: -1;
}
/* 右下三角形 */
.triangle-bottom-right::before {
content: "";
position: absolute;
width: 0;
height: 0;
border-top: 3.5rem solid var(--color-theme);
border-left: 3.5rem solid transparent;
z-index: -1;
}
/* 左上三角形 */
.triangle-top-left::before {
content: "";
position: absolute;
width: 0;
height: 0;
border-bottom: 3.5rem solid var(--color-theme);
border-right: 3.5rem solid transparent;
z-index: -1;
}
/* 左下三角形 */
.triangle-bottom-left::before {
content: "";
position: absolute;
width: 0;
height: 0;
border-top: 3.5rem solid var(--color-theme);
border-right: 3.5rem solid transparent;
z-index: -1;
}
.code-block {
background-color: #f5f5f5;
padding: 20px;
margin: 20px auto;
max-width: 800px;
border-radius: 4px;
font-family: monospace;
white-space: pre-wrap;
}
</style>
</head>
<body>
<h1 style="text-align: center;">CSS伪元素实现三角形示例</h1>
<div class="container">
<div class="triangle triangle-right">向右</div>
<div class="triangle triangle-left">向左</div>
<div class="triangle triangle-up">向上</div>
<div class="triangle triangle-down">向下</div>
<div class="triangle triangle-top-right">右上</div>
<div class="triangle triangle-bottom-right">右下</div>
<div class="triangle triangle-top-left">左上</div>
<div class="triangle triangle-bottom-left">左下</div>
</div>
<div class="code-block">
/* 向右三角形 */
.triangle-right::before {
content: "";
width: 0;
height: 0;
border-left: 3.5rem solid var(--color-theme);
border-top: 2.5rem solid transparent;
border-bottom: 2.5rem solid transparent;
}
/* 向上三角形 */
.triangle-up::before {
content: "";
width: 0;
height: 0;
border-bottom: 3.5rem solid var(--color-theme);
border-left: 2.5rem solid transparent;
border-right: 2.5rem solid transparent;
}
/* 向下三角形 */
.triangle-down::before {
content: "";
width: 0;
height: 0;
border-top: 3.5rem solid var(--color-theme);
border-left: 2.5rem solid transparent;
border-right: 2.5rem solid transparent;
}
</div>
<script>
// 可以在这里添加交互逻辑
</script>
</body>
</html>技术要点总结
1. 三角形原理：利用CSS边框的渲染特性，当元素宽高为0时，边框会形成斜线，从而创建三角形。
2. 方向控制：
向右三角形：设置左边框为实色，上下边框为透明。
向左三角形：设置右边框为实色，上下边框为透明。
向上三角形：设置下边框为实色，左右边框为透明。
向下三角形：设置上边框为实色，左右边框为透明。
3. 大小控制：
实色边框的宽度控制三角形的高度（对于左右方向）或宽度（对于上下方向）。
透明边框的宽度控制三角形的角度和大小。
4. 伪元素应用：使用伪元素(::before或::after)创建三角形，可以减少HTML元素数量，保持代码整洁。
5. CSS变量：使用CSS变量定义主题色，方便统一管理和修改。
实际开发应用场景
提示框的小箭头
下拉菜单的指示图标
关闭按钮等UI元素
自定义复选框或单选按钮样式
请注意浏览器兼容性，这些技术在现代浏览器中都能正常工作，但在旧版浏览器（如IE8及以下）可能需要特殊处理。
»»» 可以使用 Can I use 来检查伪元素的兼容性。
彩蛋
完整示例链接，请移步Cnb： Cnb中的完整示例
