【基础】在css中绘制三角形及相关应用

原创 2018年04月14日 23:50:12

简言

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

CSS与三角形

1 基本原理

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

核心代码:

.box {
    width: 50px;
    height: 50px;
    border-top: 50px solid red;
    border-left:50px solid blue;
    border-right: 50px solid green;
    border-bottom: 50px solid yellow;
}

运行结果:

边框基本原理

演示代码

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

2 绘制三角形

2.1 等边三角形

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

2.1.1 尖角向上:

.triangle-up {
    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-left: 57.735px solid transparent;
    border-right: 57.735px solid transparent;
}

尖角向上等边三角形

演示代码

2.1.2 尖角向下:

.triangle-down {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-left: 57.735px solid transparent;
    border-right: 57.735px solid transparent;
}

尖角向下等边三角形

演示代码

2.1.3 尖角向左:

.triangle-left {
    width: 0;
    height: 0;
    border-right: 100px solid red;
    border-top: 57.735px solid transparent;
    border-bottom: 57.735px solid transparent;
}

尖角向左等边三角形

演示代码

2.1.4 尖角向右:

.triangle-right {
    width: 0;
    height: 0;
    border-left: 100px solid red;
    border-top: 57.735px solid transparent;
    border-bottom: 57.735px solid transparent;
}

尖角向右等边三角形

演示代码

2.2 等腰直角三角形

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

2.2.1 左上直角:

.triangle-top-left{
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-right: 100px solid transparent;
}

左上直角等腰直角三角形

演示代码

2.2.2 右上直角:

.triangle-top-right {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-left: 100px solid transparent;
}

右上直角等腰直角三角形

演示代码

2.2.3 左下直角:

.triangle-bottom-left{
    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-right: 100px solid transparent;
}

左下直角等腰直角三角形

演示代码

2.2.4 右下直角:

.triangle-bottom-right {
    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-left: 100px solid transparent;
}

右下直角等腰直角三角形

演示代码

3 相关应用

3.1 弹出框(popover)组件

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

弹出框(popover)组件

演示代码

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

3.2 视频播放按钮

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

视频播放按钮组件

演示代码

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

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

百度前端笔试题 css3画三角形

昨天做了百度2015年前端研发笔试卷,总体感受是比较看重html和css功底,对JavaScript的考察反而更少一些,貌似阿里也是比较看重css这一块。其中有一道用css实现的布局问题,是在一个大矩...
  • Cinderella_hou
  • Cinderella_hou
  • 2016-08-05 17:01:27
  • 3213

CSS绘制小三角形效果实现&扩展

CSS绘制小三角形效果实现&扩展
  • Dong_PT
  • Dong_PT
  • 2016-03-16 02:16:28
  • 1804

CSS绘制三角形的原理剖析

今天学习Bootstrap时候,看到按钮的向下三角形源码: .caret { display: inline-block; width: 0; height: 0; margin-l...
  • zc940578704
  • zc940578704
  • 2015-01-23 12:14:26
  • 3185

使用CSS3绘制一个实心三角形

效果如下: 实现这一过程其实很简单: 1、先创建一个盒子2、为这个盒子添加样式#triangle { height: 0; width: 0; border-right: ...
  • Elliotbaird
  • Elliotbaird
  • 2017-05-06 10:45:42
  • 1118

用CSS代码绘制三角形 纯CSS绘制三角形的代码

这段时间想用css写出如下的三角形 经查阅可以使用div的border实现,将div的高度和宽度设置为0然后设置该div的border的大小,和颜色即可显示出如图的样式 1、新建一个元...
  • personbing
  • personbing
  • 2016-06-19 19:45:48
  • 876

HTML之CSS画三角形原理

CSS画三角形原理
  • pengjunlee
  • pengjunlee
  • 2016-11-01 23:54:42
  • 12202

用纯css3绘制三角形的原理

预备知识 当我们设置一个div其width与height为100px,并且设置其四边框的宽度为100px,且分别设置其颜色后,我们可以看到如下的一张图片 此时如果设置这个div的height...
  • linda_417
  • linda_417
  • 2016-08-12 17:47:53
  • 5523

用纯css画个三角形,并且用CSS3来进行翻转

三角形翻转的效果,大家想必见过,这里就把相关代码贴下,大家可以应用哦,当然翻转效果暂时不支持IE 6 7 8, 1、纯CSS做个三角 .rightdirection { width:0...
  • acongshijia
  • acongshijia
  • 2013-11-29 16:13:39
  • 1156

纯正CSS绘制三角形(各种角度)

#triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-righ...
  • z983002710
  • z983002710
  • 2017-06-30 19:18:04
  • 168

CSS实现实心三角形和空心三角形

一次开发中遇到,记录代码 原理: 1.给一个div,宽和高都为0的时候,盒子什么都没有看起来。为空白 2.给一个宽高为0的盒子给一遍像素给100px的上边,下边和右边, border-top: 90...
  • qq_34645412
  • qq_34645412
  • 2017-09-22 14:05:03
  • 9824
收藏助手
不良信息举报
您举报文章:【基础】在css中绘制三角形及相关应用
举报原因:
原因补充:

(最多只允许输入30个字)