CSS 三角形，多种方法

我喜欢 Adam Laki 的 快速技巧：CSS 三角形，因为它涵盖了前端技术中无处不在的事实：总有 多种方法 可以做同样的事情。 在这种情况下，绘制三角形可以使用

• 使用 border 和折叠元素
• 使用 clip-path: polygon()
• 使用 transform: rotate() 和 overflow: hidden
• 使用字形，如 ▼

我想说，多年来我最常使用的方法是使用 border 技巧，但我现在最喜欢使用 clip-path。 我认为像这样的代码对我来说非常清晰、易懂且易于维护：clip-path: polygon(50% 0, 0 100%, 100% 100%); 大脑：中间顶部！ 右下角！ 左下角！ 三角形！

我的第二选择方法是 Adam 列表中没有的选项：内联 <svg>！ 这种方法几乎和上面一样直观：<polygon points="0,0 100,0 50,100"/>。

直接链接 →