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

Lycheeee 发布于2019-08-30 15:53 / 1674人阅读

摘要：基本原理在中，我们可以利用四个属性来绘制三角形。绘制三角形等边三角形等边三角形又称正三边形，为三边相等的三角形，其三个内角相等，均为，它是锐角三角形的一种。

简言

本文简要阐述了用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组件都用到了边框三角形的实现方式。

演示代码

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

3.2 视频播放按钮

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

演示代码

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

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

云服务器专线服务三角形绘制 html5三角形绘制 css三角形在深度学习中的应用

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

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

纯 Css 绘制扇形

摘要：显而易见饼干为两个削成了圆形的，我们重点演示果酱是怎么制作的如图所示，大扇形由个小扇形构成，每一小扇形占整个圆饼的，大扇形占整个圆饼的。则小扇形的圆心角为，三角形的高为，宽为。阅读此文需具备基本数学知识：圆心角、弧度制、三角函数。为实现如下效果呕心沥血： showImg(https://segmentfault.com/img/remote/1460000018140398?w=2...

kel 2019-08-29 13:48 评论0 收藏0
SegmentFault 技术周刊 Vol.35 - WebGL：打开网页看大片

摘要：在文末，我会附上一个可加载的模型方便学习中文艺术字渲染用原生可以很容易地绘制文字，但是原生提供的文字效果美化功能十分有限。 showImg(https://segmentfault.com/img/bVWYnb?w=900&h=385); WebGL 可以说是 HTML5 技术生态链中最为令人振奋的标准之一，它把 Web 带入了 3D 的时代。初识 WebGL 先通过几个使用 Web...

objc94 2019-08-21 17:08 评论0 收藏0
WebGL 绘制Line的bug(二)

摘要：以两个端点组成的线段为例，绘制的时候只用指定两个端点，如果通过三角形来模拟一条线段，则至少需要两个三角形，如下图这是两个三角形模拟的线段。对于一条线段而言，控制的参数实际上只有两个端点的坐标和线的宽度。下一篇将贴上相关代码说明。插播一则广告（长期有效） MONO哥需要在武汉招JavaScript工程师若干要求：对前端技术(JavasScript、HTML、CSS)，对可视化技术(Ca...

william 2019-08-05 11:41 评论0 收藏0
Canvas基础

摘要：基础使用元素必须为其设置宽度和高度属性，指定可以绘制区域的大小。绘制路径一切形状的原始基础都是路径。其中规定要在图像源中取得的切片位置和切片大小表示该切片在画布中显示的起始位置和大小。的状态就是当前画面应用的所有样式和变形的一个快照。 title: Canvas基础 date: 2016-11-09 tags: HTML5 0x00 Canvas 使用 Canvas 元素必须为...

tain335 2019-08-30 13:15 评论0 收藏0
Canvas基础

摘要：基础使用元素必须为其设置宽度和高度属性，指定可以绘制区域的大小。绘制路径一切形状的原始基础都是路径。其中规定要在图像源中取得的切片位置和切片大小表示该切片在画布中显示的起始位置和大小。的状态就是当前画面应用的所有样式和变形的一个快照。 title: Canvas基础 date: 2016-11-09 tags: HTML5 0x00 Canvas 使用 Canvas 元素必须为...

hellowoody 2019-08-22 10:50 评论0 收藏0