CSS 实现三角形，非 Hack

LinkedME2016 发布于2019-08-29 18:37 / 1921人阅读

摘要：写过向上箭头，对话气泡或其他类似的尖角元素的人都知道，为了创建一个纯实现的三角形，必须使用某些。最流行的两种方式是通过边框实现，或字符。例如，我们无法在三角形上使用背景图片，因为边框和字符只能使用颜色。为了实现三角形，我们需要使用函数。

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

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

译注： speech bubble（对话气泡）如下图：

使用 Clip-path

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

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

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

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

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

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

创建的路径中的所有内容都会保留，而路径外内容会被隐藏。通过这种方式，我们不仅可以制作三角形，还可以制作出各种不规则的形状，且这些形状可像普通的 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 生成器 - 链接

GPU云服务器云服务器 css-hack css三角形 css三角 JS轻松实现CSS设置

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114458.html

用 CSS 实现三角形与平行四边形

摘要：所以我们需要加一个内层元素，并对内层元素做一次逆向的歪曲，从而得到我们想要的效果实现代码如下，另附示例上海总结第一种方法使用属性出三角形，并通过对三个元素进行拼接最终实现了平行四边形而第二种方法则通过来得到平行四边形。本文最初发布于我的个人博客：咀嚼之味最近在逛某个技术网站的时候，感觉文章关键词上的样式好酷炫啊。于是我将那种写法照搬到了我的博客中，也许最近逛过我博客的小伙伴已经发现...

Martin91 2019-08-28 18:14 评论0 收藏0
使用css实现全兼容的三角形

摘要：基本原理大同小异，这里主要介绍利用当然还可以使用的旋转技术实现，由于兼容性问题这里不涉及了。利用是一种常用而且简单兼容的方式在当前流行的的网站上，我们经常会看到一些小三角形的下拉提示（微博顶部的下拉菜单），简单的方式可以使用一张图片代替，但是随着前端技术的发展，以及开发者对于前端性能的吹毛求疵，越来越多的前端开发者开始返璞归真，在能不使用图片的场景中减少图片使用，css图标相对于图片...

zzbo 2019-08-28 17:55 评论0 收藏0
CSS学习笔记

CSS学习笔记在学习CSS的过程中做的一些记录，用于未来的快速回忆。 HTML常见元素和理解 head中的元素指定字符集 meta name=viewport content=...定义视图大小与设备屏幕大小的比例，用户是否可缩放指定基准路径 body中的元素 a[href, target] img[src, alt] table td[colspan, rowspan] for...

bawn 2019-08-29 17:27 评论0 收藏0
面试BAT，你凭什么说你掌握了CSS

摘要：控制表单控件的禁用状态。老不支持生成绝对定位的元素，相对于浏览器窗口进行定位。生成相对定位的元素，相对于其正常位置进行定位。由于浮动框不在文档的普通流中，所以文档的普通流的块框表现得就像浮动框不存在一样。介绍项目已经开源：https://github.com/nanhupatar... 欢迎PR 推荐关注我们的公众号 showImg(https://segmentfault.co...

darryrzhong 2019-08-29 16:55 评论0 收藏0