简言

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

1 基本原理

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

核心代码:

  1. .box {
  2. width: 50px;
  3. height: 50px;
  4. border-top: 50px solid red;
  5. border-left:50px solid blue;
  6. border-right: 50px solid green;
  7. border-bottom: 50px solid yellow;
  8. }

运行结果:

演示代码

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

2 绘制三角形

2.1 等边三角形

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

2.1.1 尖角向上:

  1. .triangle-up {
  2. width: 0;
  3. height: 0;
  4. border-bottom: 100px solid red;
  5. border-left: 57.735px solid transparent;
  6. border-right: 57.735px solid transparent;
  7. }

演示代码

2.1.2 尖角向下:

  1. .triangle-down {
  2. width: 0;
  3. height: 0;
  4. border-top: 100px solid red;
  5. border-left: 57.735px solid transparent;
  6. border-right: 57.735px solid transparent;
  7. }

演示代码

2.1.3 尖角向左:

  1. .triangle-left {
  2. width: 0;
  3. height: 0;
  4. border-right: 100px solid red;
  5. border-top: 57.735px solid transparent;
  6. border-bottom: 57.735px solid transparent;
  7. }

演示代码

2.1.4 尖角向右:

  1. .triangle-right {
  2. width: 0;
  3. height: 0;
  4. border-left: 100px solid red;
  5. border-top: 57.735px solid transparent;
  6. border-bottom: 57.735px solid transparent;
  7. }

演示代码

2.2 等腰直角三角形

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

2.2.1 左上直角:

  1. .triangle-top-left{
  2. width: 0;
  3. height: 0;
  4. border-top: 100px solid red;
  5. border-right: 100px solid transparent;
  6. }

演示代码

2.2.2 右上直角:

  1. .triangle-top-right {
  2. width: 0;
  3. height: 0;
  4. border-top: 100px solid red;
  5. border-left: 100px solid transparent;
  6. }

演示代码

2.2.3 左下直角:

  1. .triangle-bottom-left{
  2. width: 0;
  3. height: 0;
  4. border-bottom: 100px solid red;
  5. border-right: 100px solid transparent;
  6. }

演示代码

2.2.4 右下直角:

  1. .triangle-bottom-right {
  2. width: 0;
  3. height: 0;
  4. border-bottom: 100px solid red;
  5. border-left: 100px solid transparent;
  6. }

演示代码

3 相关应用

3.1 弹出框(popover)组件

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

演示代码

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

3.2 视频播放按钮

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

演示代码

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

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

【基础】在css中绘制三角形及相关应用的更多相关文章

  1. CSS - Tooltip-arrow 绘制三角形

    问题:纯CSS实现bubble的三角形部分 方法:使用border来绘制三角形:例如 .trangle { ; border-color: transparent; border-style: sol ...

  2. CSS中position:fixed的相关用法

    CSS中的三大重点知识: 1.float,浮动 2.盒子模型 3.position绝对定位 今天主要写下position中fixed相关知识: position:static,relative,abs ...

  3. css中关于table的相关设置

    一.设置好看的单边框表格 1.一种实现方式 分别给table标签和td标签设置不在同一方向的border属性,如下table设置‘左上’边框,td设置‘右下’边框.其他设置方式同样可以实现. tabl ...

  4. 前端基础之--css中可被继承和不可被继承的属性

    一.无继承性的属性 1.display:规定元素应该生成的框的类型 2.文本属性:vertical-align:垂直文本对齐 text-decoration:规定添加到文本的装饰 text-shado ...

  5. OpenGL学习(2)——绘制三角形

    在创建窗口的基础上,添加代码实现三角形的绘制. 声明和定义变量 在屏幕上绘制一个三角形需要的变量有: 三角形的三个顶点坐标: Vertex Buffer Object 将顶点数据存储在GPU的内存中: ...

  6. CSS中的文本属性

    本文总结一下CSS中关于文字的相关属性,最后给出实例. CSS基础文字属性 文字的基础属性主要包括:字体.颜色和文本.除去颜色color的属性外,字体和文本的相关属性可以权威参考: CSS 文本属性( ...

  7. CSS 魔法系列:纯 CSS 绘制三角形(各种角度)

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  8. CSS绘制三角形—border法

    1. 实现一个简单的三角形 使用CSS盒模型中的border(边框)即可实现如下所示的三角形:   CSS实现简单三角形 实现原理: 首先来看在为元素添加border时,border的样子:假设有如下 ...

  9. css绘制三角形原理

    1.新建一个元素,将它的宽高都设置为0:然后通过设置border属性来实现三角形效果,下面是css绘制三角形的原理: <!DOCTYPE html> <html> <he ...

随机推荐

  1. Vue解析四之注册变量

    判断监听的变量,如果undefined可以用$set来注册一个变量. 另外click可以是表达式,不一定必须是一个方法.

  2. oracle session数激增排查过程

    我们的生产系统使用的是oracle 11G RAC,昨天突然收到微信告警通知session数达到450个,平时的session数在200个左右. select username,status,mach ...

  3. 关于bootstrap的form表单的输入框间距样式

    <!-- 模态弹出窗内容 --> <div class="modal" tabindex="-1" role="dialog&quo ...

  4. ansible之二:模块用法

    一:ansible远程执行命令 [root@ansible ~]# ansible test -m shell -a "date" >> 2016年 08月 02日 星 ...

  5. java中equals与==的区别

    http://blog.csdn.net/zfrong/article/details/4290904

  6. SQL根据B表内容修改A表内容,查询表中重复记录,删除掉重复项只保留一条

    以下sql是a,b两张表通过关联条件id修改a表值,如果b表有重复数据记录,选第一条更新,红色条件为附加限制条件,具体视情况而定: UPDATE a SETname = b.fname,pwd = b ...

  7. 一周总结:AutoEncoder、Inception 、模型搭建及下周计划

    一周总结:AutoEncoder.Inception .模型搭建及下周计划   1.AutoEncoder: AutoEncoder: 自动编码器就是一种尽可能复现输入信号的神经网络:自动编码器必须捕 ...

  8. Entity Framework——并发策略

    使用EF框架遇到并发时,一般采取乐观并发控制. 1支持并发检验 为支持并发检验,需要对实体进行额外的设置.默认情况下是不支持并发检验的.有以下两种方式: 方式名称 说明 时间戳注解/行版本 使用Tim ...

  9. springmvc与freemarker的整合

    官方简介:FreeMarker 是一款 模板引擎: 即一种基于模板和要改变的数据, 并用来生成输出文本(HTML网页,电子邮件,配置文件,源代码等)的通用工具. 它不是面向最终用户的,而是一个Java ...

  10. python全栈学习--day4

    列表 说明:列表是python中的基础数据类型之一,它是以[]括起来,每个元素以逗号隔开,而且他里面可以存放各种数据类型比如:   1 li = ['alex',123,Ture,(1,2,3,'wu ...