CSS三角箭头是指利用CSS（层叠样式表）的属性来创建箭头形状的图形，常用于网页设计中，比如对话框箭头、下拉菜单箭头等。传统的做法会使用图片作为箭头，但这种方法需要两张图片来处理hover效果，对于只需要一个小箭头来说，显得资源过于浪费。因此，使用纯CSS方法制作三角箭头就显得更为高效和资源节约。
使用纯CSS创建三角箭头的核心在于边框属性（border）。当一个元素的border-width设置为0时，元素本身不会显示任何边框。但可以通过设置不同边框颜色并缩放元素来显示三角形。具体来说，一个宽度和高度都为0的元素，若给其设置四个边框且每边边框颜色不相同，就会出现四个三角形。通过对边框颜色的调整，可以只保留需要的三角形，并将其定位到合适的位置。
在上述代码示例中，我们看到`.container`类定义了一个相对定位的方框，`.content`类定义了方框中的内容区域，并通过CSS的`box-shadow`属性和`border-radius`属性添加阴影和圆角效果。而`.s`类和`.i`类则用于生成箭头效果，通过设置`border-color`和`border-style`，再结合`border-width`属性，使得`.i`元素在`.s`元素内形成一个三角形的箭头效果。
在实现上，`border-color`的值由透明(`transparent`)、特定颜色和透明组成，这样就可以在`.s`元素上形成一个三角形的开口，然后通过`.i`元素将这个开口补上，形成完整的箭头。而`.s`元素的位置和大小控制了箭头的方向和形状。
除此之外，上述内容还涉及了CSS3的前缀属性（如`-moz-border-radius`、`-webkit-border-radius`等），它们用于增加浏览器兼容性。以及CSS3的阴影效果(`box-shadow`、`-moz-box-shadow`、`-webkit-box-shadow`)，增强了元素的视觉效果。同时，还使用了IE滤镜(`filter`)属性来实现阴影效果，以适应老版本的IE浏览器。
总体而言，通过纯CSS创建三角箭头能够减少图片资源的使用，减小页面加载的负担，并且可以更好地适应响应式布局，使其在不同尺寸的设备上都能保持良好的显示效果。这种方法的掌握，不仅需要对CSS属性有深入的理解，还需要掌握CSS布局技巧，例如相对定位、绝对定位等。
