CSS 实现三角形，非 Hack

2019年9月14日 124次阅读 来源: 果冻

写过 HTML upvote arrow（向上箭头），speech bubble（对话气泡）或其他类似的尖角元素的人都知道，为了创建一个纯 CSS 实现的三角形，必须使用某些 Hack。最流行的两种方式是通过 边框实现，或 Unicode 字符。

不得不说，这些 CSS Hack 都非常聪明，但它们却算不上好的解决方案，代码不优雅且不够灵活。例如，我们无法在三角形上使用背景图片，因为边框和字符只能使用颜色。

译注： speech bubble（对话气泡）如下图：
《CSS 实现三角形，非 Hack》

使用 Clip-path

Clip-path 是 CSS 规范中新属性中的一个，它能让我们只显示元素的一部分并隐藏其余部分。其工作原理如下：

假设我们有一个普通的矩形 div 元素。你可以在下面的编辑器中单击 Run 运行并查看渲染后的 HTML。（译注：原文内有在线代码编辑器，此处仅贴出代码，可自行 copy 测试。）

div {
    width: 200px;
    height: 200px;
    background: url(https://goo.gl/BeSyyD);
}
<div></div>

为了实现三角形，我们需要使用 polygon() 函数。其参数为以逗号分隔的平面坐标点，这些坐标点定义了我们的剪切遮罩的形状。三角形 = 3个点。可以试着更改值并查看形状是如何变化的。

div {
    width: 200px;
    height: 200px;
    background: url(https://goo.gl/BeSyyD);

    /* 三个点分别为：中上的点，左下的点，右下的点 */
    clip-path: polygon(50% 0, 0 100%, 100% 100%);
}
<div></div>

创建的路径中的所有内容都会保留，而路径外内容会被隐藏。通过这种方式，我们不仅可以制作三角形，还可以制作出各种不规则的形状，且这些形状可像普通的 CSS 块一样。（译注：即可以正常运用 CSS 属性在这些形状上）

这种方法唯一的缺点就是是我们需要自行计算点的坐标来得到一个好看的三角形。

不过，它比使用边框或▲（译注：正三角的 Unicode 字符）更好。

浏览器支持

如果你查看 clip-path 的 caniuse 页面，一开始你发现貌似兼容性非常不好，但事实上，该属性在 Chrome 中能正常工作，且不需要前缀，在 Safari 中需要加 -webkit- 前缀。Firefox 53 版本以上可用。IE / Edge 一贯的不支持，未来也许会支持。

关于 clip-path 属性有很多小技巧，包括 SVG 的“奇幻”用法。了解更多，请查看下面的链接。

  • MDN 上的 clip-path – 链接
  • Codrops 上的深入 clip-path 教程 – 链接
  • Clippy, 一个 clip-path 生成器 – 链接

《CSS 实现三角形，非 Hack》

    原文作者：果冻
    原文地址: https://segmentfault.com/a/1190000018906708
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞