CSS中三角形在网页中比较常见，以前是图片，不过现在基本上都是通过CSS可以完成，实现比较简单，我们可以看一组简单的三角形效果:

其实实现起来比较简单，通过空div然后设置宽高为0，之后可以四周border的宽度，控制三角形的形状，四个border可以看成是两横横竖的木头的重叠的效果，两横在两竖上面，三角形就是中间重叠的部分切分出来的,样式的代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
.triangle {
    width: 0;
    height: 0;
    border-top: 20px solid #EEB422;
    border-right: 20px solid #C0FF3E;
    border-bottom: 20px solid #A020F0;
    border-left: 20px solid #7CFC00;
}
 
.triangle-up {
    width: 0;
    height: 0;
    border-right: 20px solid transparent;
    border-bottom: 40px solid #A020F0;
    border-left: 20px solid transparent;
}
 
.triangle-down {
    width: 0;
    height: 0;
    border-top: 40px solid #EEB422;
    border-right: 20px solid transparent;
    border-left: 20px solid transparent;
}
 
.triangle-left {
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 40px solid #7CFC00;
}
 
.triangle-right {
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-right: 40px solid #C0FF3E;
}
 
.triangle-left-bottom {
    width: 0;
    height: 0;
    border-top: 40px solid transparent;
    border-left: 40px solid #7CFC00;
}
 
.triangle-right-bottom {
    width: 0;
    height: 0;
    border-top: 40px solid transparent;
    border-right: 40px solid #C0FF3E;
}

具体的html页面代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<div class="row">
    <span>四个三角</span>
    <div class="triangle">
    </div>
</div>
<div class="row">
    <span>上三角</span>
    <div class="triangle-up">
    </div>
</div>
<div class="row">
    <span>下三角</span>
    <div class="triangle-down">
    </div>
</div>
<div class="row">
    <span>左三角</span>
    <div class="triangle-left">
    </div>
</div>
<div class="row">
    <span>右三角</span>
    <div class="triangle-right">
    </div>
</div>
<div class="row">
    <span>左下角</span>
    <div class="triangle-left-bottom">
    </div>
</div>
<div class="row">
    <span>右下角</span>
    <div class="triangle-right-bottom">
    </div>
</div>

CSS-三角形及其原理的更多相关文章

  1. 经典CSS实现三角形图标原理解析

    前言: 在写这篇文章之前,我也看过很多前端大神写的代码,But,都只是粘贴代码和给出显示效果,对于初学者来说大家都喜欢刨根问底,为什么要这样做呢? 接下来就让我给大家分享一下我对CSS实现三角形的理解 ...

  2. 利用css的border实现画三角形思路原理

    1.利用Css 的border绘制三角形的原理: div的border是有宽度和颜色的,当div的宽度比较大的时候,比如上面代码每个边100像素,颜色又不一样,浏览器怎么渲染颜色呢?经测试发现,宽度较 ...

  3. CSS实现三角形图标原理解析

    CSS实现三角形图标原理解析: border边框语法: border 四条边框设置border-left 设置左边框,一般单独设置左边框样式使用border-right 设置右边框,一般单独设置右边框 ...

  4. css三角形的实现

    实底三角形: <html> <head> <title></title> <style type="text/css"> ...

  5. 7：CSS Sprites的原理（图片整合技术）

    7:CSS Sprites的原理(图片整合技术) 一.将导航背景图片,按钮背景图片等有规则的合并成一张背景图,即将多张图片合为一张整图,然后用background-position”来实现背景图片的定 ...

  6. CSS Sprites的原理（图片整合技术）(CSS精灵)/雪碧图

    CSS Sprites的原理(图片整合技术)(CSS精灵)/雪碧图   一.将导航背景图片,按钮背景图片等有规则的合并成一张背景图,即将多张图片合为一张整图,然后用background-positio ...

  7. 前端读者 | CSS三角形和饼图

    @羯瑞 三角形 .triangle{width:0;height:0;border-width:50px;border-style:solid;border-color:red blue green ...

  8. CSS Sprites技术原理和使用

      在分析各个网站的CSS时,我们经常可以看到一些网站有很多的元素共享了一张背景图片,而这张背景图片包含了所有这些元素需要的背景,这种技术就叫做CSS Sprites. 淘宝的css sprites ...

  9. css的核心原理分为优先级原则与继承原则两大部分

    css原理:1.优先原则=>后解析的内容会覆盖之前解析的内容(所谓解析就是读取的css样式)2.继承原则=>嵌套里面的标签拥有外部标签的某些样式,子元素可以继承父元素的属性 1>优先 ...

  10. CSS三角形的实现原理及运用

    原理 css盒模型 一个盒子包括: margin+border+padding+content– 上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小 ...

随机推荐

  1. redis 单实例安装

    单实例安装 近些年,由于内存技术的提升.造价的下降,越来越多企业的服务器内存已增加到几百G.这样的内存容量给了内存数据库一个良好的发展环境. 而使用Redis是内存数据库的一股清流,渐有洪大之势.下面 ...

  2. Centos7上实现不同网段的服务器文件共享

    目的:实现不同网段的服务器实现文件共享 前提:服务器1可以和共享服务器互通,共享服务器和服务器2互通 拓扑如下: 思路: 一般文件共享有涉及windown系统的用samba,纯类centos系统就用n ...

  3. IDEA中tomcat的部署

    创建一个项目就要部署tomcat

  4. java数组元素的复制

    package day03; import java.util.Arrays; /** * * 数组元素的复制: int的默认值是0,boolean默认值是flase 数组的扩容和缩容(本质的实现数组 ...

  5. 插件使用一颜色选择器---cxColor

    cxColor 是一款颜色选择器.这样的插件使用场景不多.可喜的这是国人写的. 官方网站: https://github.com/ciaoca/cxColor 使用方法: 1.引入jquery库 1 ...

  6. VUE，页面跳转传多个参数

    <template> <a @click="goNext">Next</a> <input type="text" v ...

  7. 转: 解压Assets.car (iOS加密资源)

    今天想获取APP的资源,但是查看xxx.app文件夹里面,缺少了大部分资源.在文件夹里面发现Assets.car这个文件,发现文件很大有40多M,猜想图片资源会不会被压缩到这里面了,所以就网络上查了下 ...

  8. (转载)Memcached和Redis简介

    转载自: Memcached和Redis简介 博主的Redis资料列表.http://www.cnblogs.com/programlearning/category/1003158.html 前言: ...

  9. delphi使用sqlite数据库时的中文路径问题

    https://blog.csdn.net/yuehaiyang/article/details/4184198 如果数据库所在的路径是中文路径的话,根本运行不起来,会报错,因为sqlite用的是ut ...

  10. noip2012

    题解: 闲着无聊做了一遍noip2012 我觉得出题出的好奇怪啊... 为什么两道倍增两道二分答案??? 两天第一题: 第一天第一题傻逼普及组题没什么好说的了 第二天第一题你会扩欧就秒了 两天第二题: ...