Generated CSS
CSS三角形出现在提示框、下拉箭头、对话气泡、分隔线和装饰形状中。它们可以通过三种不同的技术创建，每种技术在浏览器支持、背景图像兼容性、box-shadow行为和动画能力方面各有取舍。
边框技巧是最古老且兼容性最好的技术。它利用了CSS边框一个鲜为人知的几何特性：当元素的宽度和高度都为零时，其四条边框仍然占据空间并在元素中心相交。使三条边框透明，只留下一条有色边框，就会显示一个三角形，方向与有色边框相反。
边框技巧有一个重要限制：box-shadow会投影在不可见的矩形边界框上，而不是三角形形状。对于需要阴影的三角形，请使用应用于包装元素的filter: drop-shadow()。
clip-path: polygon()方法将普通矩形元素裁剪成三角形形状。与边框技巧不同，元素保留其正常的矩形结构——仍然有背景，可以接受box-shadow，可以包含内容。关键优势是应用于元素或包装器的filter: drop-shadow()会跟随裁剪后的形状。
提示框箭头是CSS三角形最常见的实际应用。标准方法在提示框容器上使用::before或::after伪元素，绝对定位使其恰好延伸到提示框边缘之外。
角三角形——坐落在角落而不是指向基本方向的三角形——只使用两条边框而不是三条边框来制作。它们通常用于卡片上的"ribbon"装饰和"sale"或"new"徽章指示器。
clip-path: polygon()方法支持边框技巧无法实现的形状变形动画。由于当起始和结束值具有相同数量的多边形点时，clip-path值可以过渡，你可以动画化三角形改变方向。
等边三角形的高度是其宽度乘以√3/2 ≈ 0.866。通过clip-path，你可以在响应式元素上使用aspect-ratio: 1 / 0.866。
经典的下拉箭头图标——开放三角形而不是实心三角形——是用旋转45度的带两条边框的正方形元素制作的。这产生了经典的下拉箭头V形图标。
边框技巧在视觉上产生三角形，但元素的边界框仍然是零尺寸的矩形。box-shadow投影在边界框上，它是不可见的。在包装元素上使用filter: drop-shadow()——它分析元素实际渲染的像素，只在可见部分投影。
边框技巧不能容纳渐变填充。对于渐变三角形，使用clip-path: polygon()并以任意渐变作为元素的背景。
用clip-path可以。将两种方向定义为具有相同点数的polygon()值，并在它们之间过渡。
对于提示框箭头使用边框技巧和伪元素（::before或::after）。它产生最少的代码，在所有浏览器中都能工作，并给你精确控制箭头大小和位置。
使用伪元素叠加两个边框技巧三角形：基础元素产生较大的外部三角形（边框颜色），其::after伪元素产生略小的三角形（背景颜色），定位使其重叠。