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. Selenium+PhantomJS使用时报错原因及解决方案

    问题 今天在使用selenium+PhantomJS动态抓取网页时,出现如下报错信息: UserWarning: Selenium support for PhantomJS has been dep ...

  2. Fisher–Yates shuffle 算法

    费希尔 - 耶茨洗牌 维基百科,自由的百科全书     所述费-耶茨洗牌是一种算法,用于产生随机排列的有限的序列 -in平原而言,算法打乱的序列.该算法有效地将所有元素放在帽子里; 它通过随机从帽子中 ...

  3. GZipStream 压缩与解压数据

    简介:此类表示 GZip 数据格式,它使用无损压缩和解压缩文件的行业标准算法.这种格式包括一个检测数据损坏的循环冗余校验值.GZip 数据格式使用的算法与 DeflateStream 类的算法相同,但 ...

  4. WPF 对控件进行截图且不丢失范围（转载）

    原文:Taking WPF “Screenshots” I was recently working on a Surface project at Microsoft (that will be s ...

  5. noip斗地主

    题解: 5分钟看题 25分钟码完 然后调了一下 样例1s??? 好吧我把只出一张牌当成决策了.. 判断了一下前面没有出牌再考虑这个决策(是不是傻逼??) 交上去65 于是愉快的改状压 改到一半的时候想 ...

  6. groovy中的正则表达式操作符【groovy】

    groovy中对于正则表达式的书写进行了简化,同时引入了新的操作符,使得正则表达式使用起来比较方便简单. 对于书写的改进: 比如 assert "\\d" == /\d/ 也就是在 ...

  7. 解决 Ionic 浏览器跨域问题

    <system.webServer> <httpProtocol> <customHeaders> <add name="Access-Contro ...

  8. 请使用千位分隔符(逗号)表示web网页中的大数字

    方法一:使用正则表达式 语法如下: String(Number).replace(/(\d)(?=(\d{3})+$)/g, "$1,"); 举例: String(12345678 ...

  9. ZJOI2018 胖 二分 ST表

    原文链接https://www.cnblogs.com/zhouzhendong/p/ZJOI2018Day2T2.html 题目传送门 - BZOJ5308 题目传送门 - LOJ2529 题目传送 ...

  10. JDK生成证书：

    JDK生成证书: 在此之前确保本地已安装JDK1.6 1.生成客户端的私钥,客户端的证书 1)keytool -genkey -alias clientkey -keystore kclient.ke ...