在css中绘制三角形及相关应用

简言

本文简要阐述了用CSS边框的方法在页面上绘制三角形,包括几种典型的三角形绘制,还介绍了几个简单的应用场景。利用边框绘制三角形方法只是众多方案中的一种,大家根据项目实际,选用最适宜项目的方案。

CSS与三角形1 基本原理

在CSS中,我们可以利用border-top、border-left、border-bottom、border-left四个属性来绘制三角形。实现的基本原理参见下面的演示代码及其运行结果。

核心代码:

运行结果:边框基本原理

演示代码(http://www.42du.cn/run/108)

从以上代码及运行结果不难想出绘制三角形的办法,我们只要将 的长度和宽度都设成0,就可以得到四个等腰三角形。再将不想保留的三角形边框颜色设置成透明色(即:)就可以隐藏掉不想保留的三角形。从而完成三角形的绘制。

2 绘制三角形

2.1 等边三角形

等边三角形(又称正三边形),为三边相等的三角形,其三个内角相等,均为60°,它是锐角三角形的一种。等边三角形也是最稳定的结构。

2.1.1 尖角向上:

尖角向上等边三角形

演示代码(http://www.42du.cn/run/109)

2.1.2 尖角向下:

尖角向下等边三角形

演示代码(http://www.42du.cn/run/110)

2.1.3 尖角向左:

尖角向左等边三角形

演示代码(http://www.42du.cn/run/111)

2.1.4 尖角向右:

尖角向右等边三角形

演示代码(http://www.42du.cn/run/112)

2.2 等腰直角三角形

等腰直角三角形是特殊的等腰三角形,它的两底角相等,都是45°;它的两腰长度相等。

2.2.1 左上直角:

左上直角等腰直角三角形

演示代码(http://www.42du.cn/run/113)

2.2.2 右上直角:

右上直角等腰直角三角形

演示代码(http://www.42du.cn/run/114)

2.2.3 左下直角:

左下直角等腰直角三角形

演示代码(http://www.42du.cn/run/115)

2.2.4 右下直角:

右下直角等腰直角三角形

演示代码(http://www.42du.cn/run/116)

3 相关应用

3.1 弹出框(popover)组件

弹出框(popover)或提示框(tooltip)一般都会用到三角形,三角形明确并加强了指向作用。类似于Bootstrap的Popover和Tooltip组件都用到了边框三角形的实现方式。

弹出框(popover)组件

演示代码(http://www.42du.cn/run/117)

上述演示只是实现了顶部弹出框,其它方向弹出框参考上述实现方式即可。

3.2 视频播放按钮

视频播放按钮(Play button)可以采用边框三角形的实现方式。

视频播放按钮组件

演示代码(http://www.42du.cn/run/118)

三角形的应用场景还有很多,比如下拉菜单(dropdown menu)中,或者是“顶”及“踩”按钮等。

边框实现三角形只是众多方案之一,大家可以根据项目实际,选择小图标方案或选用SVG方案。

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180415G029ZU00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券