一、前言

三角形实现原理:宽度width为0;height为0;(1)有一条横竖边(上下左右)的设置为border-方向:长度 solid red,这个画的就是底部的直线。其他边使用border-方向:长度 solid transparent。(2)有两个横竖边(上下左右)的设置,若斜边是在三角形的右边,这时候设置top或bottom的直线,和右边的斜线。若斜边是在三角形的左边,这时候设置top或bottom的直线,和左边的斜线。

二、实现

2.1 Triangle Up


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

2.2 Triangle Down

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

2.3 Triangle Left

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

2.4 Triangle Right

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

2.5 Triangle Top Left

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

2.6 Triangle Top Right

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

2.7 Triangle Bottom Left

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

2.8 Triangle Bottom Right

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

纯 CSS 实现绘制各种三角形(各种角度)的更多相关文章

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

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

  2. CSS学习笔记(8)--纯CSS绘制三角形(各种角度)

    纯CSS绘制三角形(各种角度) CSS三角形绘制方法,学会了这个,其它的也就简单.   我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多 ...

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

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

  4. 摘记 史上最强大的40多个纯CSS绘制的图形(一)

    今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和网站小图标,真的非常强大,分享给大家. Square(正方 ...

  5. 史上最强大的40多个纯CSS绘制的图形

    Square(正方形) #square { width: 100px; height: 100px; background: red; } Rectangle(矩形) #rectangle { wid ...

  6. 40多个纯CSS绘制的图形

    本文由码农网 – 陈少华原创,转载请看清文末的转载要求. 今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和 ...

  7. CSS 魔法系列:纯 CSS 绘制图形(各种形状的钻石)

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

  8. 史上最强大的40多个纯CSS绘制的图形[转]

    今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和网站小图标,真的非常强大,分享给大家. Square(正方 ...

  9. 用CSS绘制实体三角形

    用CSS绘制实体三角形 使用CSS盒模型中的border(边框)即可实现如下所示的三角形: .box { width: 0; height: 0; border-width: 100px; borde ...

随机推荐

  1. python执行unittest界面设置

    执行单元测试时,系统会自动添加unittest in...的执行服务器. 执行时unittest in...的执行服务器在界面右上方可以看到,且执行结果为左侧框和右侧统计结果. 如果没有,会导致测试结 ...

  2. linux初学者-虚拟机管理篇

    linux初学者-虚拟机管理篇 之前已经介绍过,在linux系统的学习中,一般需要在虚拟机中进行操作,但是虚拟机是如何安装的呢?又是如何管理的呢?下文将对虚拟机的安装和管理进行一个简要的介绍. 1.虚 ...

  3. java - java集合类

    1.接口实现类 ①List List list1 = new ArrayList(); List list2 = new LinkedList(); ②Set Set<String> se ...

  4. java并发笔记之证明 synchronized锁 是否真实存在

    警告⚠️:本文耗时很长,先做好心理准备 证明:偏向锁.轻量级锁.重量级锁真实存在 由[java并发笔记之java线程模型]链接: https://www.cnblogs.com/yuhangwang/ ...

  5. python基础——元组(tuple)

    Python的元组与列表类似,不同之处在于元组的元素不能修改. 元组使用小括号,列表使用方括号. 元组创建很简单,只需要在括号中添加元素,并使用逗号隔开即可. tuple1 = () tuple2 = ...

  6. python:函数可以返回值--编写脚本计算24 + 34 / 100 - 1023

    1.脚本 def add(a,b):    return (a+b)def div(a,b,c):    return (a/b-c)x = div(34,100,1023)y = add(24,x) ...

  7. jQuery通过id和name获取值的区别

    $(#'id').函数 $("input[name='name']")

  8. 彻底搞懂Python切片操作

        在利用Python解决各种实际问题的过程中,经常会遇到从某个对象中抽取部分值的情况,切片操作正是专门用于完成这一操作的有力武器.理论上而言,只要条件表达式得当,可以通过单次或多次切片操作实现任 ...

  9. Charles(Windows/Android)入门使用

    一. 介绍以及下载(windows) Charles是一个HTTP代理/HTTP监视器/反向代理,使开发人员能够查看其机器和Internet之间所有HTTP和SSL/HTTPS流量,这包括请求,响应和 ...

  10. Linux之TCPIP内核参数

    /proc/sys/net目录 参考1.Linux之TCPIP内核参数优化 所有的TCP/IP参数都位于/proc/sys/net目录下(请注意,对/proc/sys/net目录下内容的修改都是临时的 ...