css——三角形的实现
来源:互联网 发布:淘宝头像 编辑:程序博客网 时间:2024/05/20 04:29
不知道实现三角形有多少种方法。以下是我所知道的。新手入门,第一次写博客。
三角形,一个重要的角色扮演是transparent值,它身后撑着的巨大boss是border。
不会怎么解释,直接上代码跟效果图。
/*等边三角形*/.equilateral_triangle{width: 0px;height: 0px;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 100px solid black;}
嗯,接下来再看看三角形是从怎样根源的根源变化来的
.square{width:0;height:0;border:50px solid;border-color:red green blue yellow;}效果图
由此通过设置transparent就可以演变出各式各样的三角形,举其中两个例子。
注意到一点,就是通过设置左右、上下的比例实现不同类型的三角形。
比如,第一个例子,left、right都是bottom的一半,而没设置top值,显示出来的是正三角形,如果top取代bottom,将是倒三角形,其他向左向右一样的道理就不在赘述。
第二个例子,left、right、top、bottom值都一样,每个是正方形的一半,用数学语言描述,底是高的两倍。
在第一个例子上再给它加上一个跟bottom值一样的top,结果如图:
从三角形的实例中加深对border的理解,不,应该说认识。
还是从例子看border四边的分配效果。图是元素加了width跟height。可以看出,border的值是每个梯形的高(YY的描述),底的长度是由相邻元素撑开的。有意思的是相邻元素的分割是对角线的,因此三角形的形成也是利用了border这一特征吧。
不知道怎么理解三角形这种实现方法,只能通过实现的效果去看了。
阅读全文
0 0
- css——三角形的实现
- CSS的三角形实现
- css的border实现三角形
- css三角形的实现原理
- CSS——三角形
- 使用CSS实现各个方向的三角形
- 三种纯CSS实现三角形的方法
- 三种纯CSS实现三角形的方法
- 三种纯CSS实现三角形的方法
- CSS实现三角形的动画旋转
- 三种纯css实现三角形的方法
- 三种纯CSS实现三角形的方法
- 三种纯CSS实现三角形的方法
- CSS实现带阴影效果的三角形
- css实现带边框的三角形
- CSS实现三角形图标的原理
- css实现三角形的两种方法
- 三种纯CSS实现三角形的方法
- 异步代码错误捕获
- 杭电ACM:人见人爱A-B
- 路漫漫其修远兮,吾将上下而求索(非干货,勿入)
- CSS3理解display属性
- 数据结构--堆
- css——三角形的实现
- 互斥资源加锁的实现方式
- 用面向对象的方法实现互斥资源加锁
- 串行队列/并发队列&异步任务/同步任务代码演练
- less简单笔记
- Simple Class Serialization With JsonCpp
- 【HDU1069】 Monkey and Banana(动态规划)
- windows10 64位 redis3.0.*下载以及安装
- 多线程入门