### 使用DIV+CSS创建小三角形
#### 一、引言
在网页设计与开发过程中，经常需要用到一些小图标或装饰元素来美化页面布局。其中，利用CSS样式创建各种形状的小三角形是一种常见且实用的技术手段。通过巧妙地设置边界（`border`）属性，可以轻松实现不同方向和颜色的小三角形效果，而无需引入额外的图片资源，从而减少页面加载时间并提高用户体验。
#### 二、基础知识
1. **HTML结构**：首先需要一个基本的HTML结构作为承载这些CSS样式的容器。
2. **CSS选择器**：用于指定哪些HTML元素应用特定的样式规则。
3. **CSS边框属性**：通过调整边框的宽度、颜色和样式来实现所需的效果。
4. **CSS其他属性**：如`overflow`、`width`、`height`等，用于辅助完成布局和视觉效果的控制。
#### 三、实例分析
根据提供的代码片段，我们可以看到具体的实现过程：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用DIV+CSS写小三角</title>
<style>
* {
margin: 0;
padding: 0;
font-size: 12px;
font-family: Verdana, Arial;
line-height: 1.8;
list-style: none;
}
#info, #nav {
margin: 50px;
border: 1px dashed #f30;
background: #ffc;
padding: 50px;
}
#info div {
background: #f00;
width: 0px;
height: 0px;
overflow: hidden;
margin-bottom: 10px;
}
/* 不同方向的小三角 */
#com_a { border-top: 10px solid #ffc; border-left: 10px solid #f30; border-bottom: 10px solid #ffc; }
#com_b { border-top: 10px solid #ffc; border-right: 10px solid #f30; border-bottom: 10px solid #ffc; }
#com_c { border-top: 10px solid #ffc; border-right: 10px solid #f30; border-bottom: 10px solid #ffc; border-left: 10px solid #f30; }
#com_d { border-top: 10px solid #f30; border-right: 10px solid #ffc; border-bottom: 10px solid #f30; border-left: 10px solid #ffc; }
#com_e { border-top: 10px solid #ffc; border-left: 10px solid #f30; }
#com_f { border-top: 10px solid #f30; border-right: 10px solid #ffc; border-left: 10px solid #ffc; }
#com_g { border-right: 10px solid #ffc; border-bottom: 10px solid #f30; border-left: 10px solid #ffc; }
#com_h { border-top: 10px solid #f30; border-bottom: 10px solid #f30; border-left: 10px solid #ffc; }
</style>
</head>
<body>
<div id="info">
<div id="com_a"></div>
<div id="com_b"></div>
<div id="com_c"></div>
<div id="com_d"></div>
<div id="com_e"></div>
<div id="com_f"></div>
<div id="com_g"></div>
<div id="com_h"></div>
</div>
</body>
</html>
```
#### 四、具体实现方法
1. **水平向右的红色小三角** (`#com_a`)：
- `border-top: 10px solid #ffc;`：顶部为透明色。
- `border-left: 10px solid #f30;`：左侧为红色。
- `border-bottom: 10px solid #ffc;`：底部为透明色。
- 结果是一个水平向右的红色小三角。
2. **水平向左的红色小三角** (`#com_e`)：
- `border-top: 10px solid #ffc;`：顶部为透明色。
- `border-left: 10px solid #f30;`：左侧为红色。
- 结果是一个水平向左的红色小三角。
3. **垂直向下的红色小三角** (`#com_h`)：
- `border-top: 10px solid #f30;`：顶部为红色。
- `border-bottom: 10px solid #f30;`：底部为红色。
- `border-left: 10px solid #ffc;`：左侧为透明色。
- 结果是一个垂直向下的红色小三角。
4. **垂直向上的红色小三角** (`#com_d`)：
- `border-top: 10px solid #f30;`：顶部为红色。
- `border-right: 10px solid #ffc;`：右侧为透明色。
- `border-bottom: 10px solid #f30;`：底部为红色。
- `border-left: 10px solid #ffc;`：左侧为透明色。
- 结果是一个垂直向上的红色小三角。
5. **其他方向的小三角** (`#com_b`, `#com_c`, `#com_f`, `#com_g`)：
- 通过调整`border`的宽度和颜色，可以实现不同方向的小三角。
#### 五、总结
通过以上示例可以看出，利用CSS的`border`属性，结合不同的颜色和宽度设置，可以灵活地创建出多种方向和颜色的小三角形。这种技术不仅可以用来作为装饰元素，还可以应用于导航箭头、提示框等实际场景中，极大地丰富了前端页面的设计可能性。掌握这些基本技巧后，开发者可以根据实际需求进一步扩展和创新，提升网页的美观度和用户体验。
