写过HTML点赞箭头（向上箭头）、对话泡泡（对话泡泡）或其他类似尖角元素的人都知道，为了创建三角形的纯CSS实现，必须使用一些Hack。两种最流行的方式是通过边框或Unicode字符。不得不说这些CSSHacks很聪明，但是都不是很好的解决方案，代码不够优雅，不够灵活。例如，我们不能在三角形上使用背景图像，因为边框和字符只能使用颜色。译注：对话泡泡（对话泡泡）如下图：使用Clip-pathClip-path是CSS规范中的新属性之一，它允许我们只显示元素的一部分，隐藏其余部分。它是这样工作的：假设我们有一个普通的矩形div元素。您可以在下面的编辑器中单击运行以运行并查看呈现的HTML。（注：原文有在线代码编辑器，这里只贴出代码，大家可以自行复制测试。）div{width:200px;高度：200px；background:url(https://goo.gl/BeSyyD);}
为了实现三角形，我们需要用到polygon()函数。它的参数是以逗号分隔的平面坐标点，用于定义剪贴蒙版的形状。三角形=3分。您可以尝试更改值，看看形状如何变化。div{宽度：200px;高度：200px；背景：网址（https://goo.gl/BeSyyD）；/*三点分别是：中上点、左下点、右下点*/clip-path:polygon(50%0,0100%,100%100%);}所有内容创建的路径中的内容将被保留，路径外的内容将被隐藏。这样我们不仅可以做出三角形，还可以做出各种不规则的形状，而且这些形状可以像普通的CSS块一样做出来。（译注：也就是在这些形状上可以正常使用CSS属性）这种方法唯一的缺点是我们需要自己计算点的坐标才能得到一个好看的三角形。尽管如此，它还是比使用边框或▲好。浏览器支持如果你看clip-path的caniuse页面，一开始你会发现似乎兼容性很差，但实际上这个属性在Chrome中正常工作，不需要前缀。在Safari中，您需要添加-webkit-前缀。适用于Firefox版本53及更高版本。IE/Edge并不总是支持，但将来可能会支持。有很多关于clip-path属性的小技巧，包括SVG的“神奇”用法。要了解更多信息，请查看下面的链接。MDN上的剪辑路径-链接Codrops上的深入剪辑路径教程-链接Clippy，一个剪辑路径生成器-链接