如何用css画出三角形
看到有面试题里会有问到如何用css画出三角形
众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状
画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及颜色。
如果你将宽度调的足够大,改变不同方向的颜色,你就可以发现盒模型的border是四个梯形一样的线条。
这个时候如果将盒模型内部的height,width调为0px,则三角形就形成了。
1 border:100px solid transparent //边框100px,实线,透明颜色,下面三行代码等同于此句
2 border-width:15px; //border-width代表所有方向的border
3 border-style:solid;
4 border-color:transparent;
如果你看明白了原理那么现在你应该已经可以自己写出代码了。
1 width: 0;
2 height: 0;
3 border-left: 50px solid transparent; //左边宽度50px,实线,透明颜色
4 border-right: 50px solid transparent; //右边同上
5 border-top: 100px solid red; //上边宽度100px,实线,红色
上面这段代码可以生成一个向下的三角形。如下图所示(为便于理解我替换了右边的颜色)
由这个效果图我们可以看出,要生成一个三角形我们需要三条边框。
左右边框的高度会决定三角形的高有多长。
三角形高度则由边框自己的宽度决定
那么如何生成一个指向右下或者左下之类的这样的三角呢?
相信大家已经通过上面的图看出来了。
我们只需要两条边框就够了。
1 width: 0;
2 height: 0;
3 border-top: 100px solid red;
4 border-right: 100px solid transparent;
这段代码就会生成一个指向左下的三角形,底和高都是100px。
还记不记得border-width。
它可以用一句代码定义四条边框的宽度。
转载自:http://www.cnblogs.com/Aaxuan/p/6066316.html
如何用css画出三角形的更多相关文章
- 用css画出三角形
看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...
- 用css画出三角形【转】
看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...
- css 画出三角形
技术分享不一定行文累赘 这里说说最简洁的 css 画出三角形 display: inline-block; border: 10px dashed transparent; border-left: ...
- CSS画出三角形(利用Border)
画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及颜色. 如果你将宽度调的足够大,改变不同方向的颜色,你就可以发现盒模型的border是四个梯形一样的线条. div{ width ...
- 用css画出对话框
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAa4AAAFSCAYAAACqpTv4AAAgAElEQVR4nO3deZBU5b3GcUIlVTG3bi
- 用纯css画个三角形
用纯css画个三角形以下是源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- css写出三角形(兼容IE)
css写出三角形 利用css写三角形,兼容IE7 .arrow-up { width:0px; height:0px; border-left:10px solid transparent; bo ...
- 如何用css实现一个三角形?
昨天被人问到说如何用css实现一个三角形?em.... 当时被问到了,汗颜,今天找了一些帖子看了一下,也算是记录一下吧 代码如下: 实现效果:
- 用HTML+CSS画出一个同心圆
参加web前端校招的同学们经常会遇到这样的面试题:用HTML+CSS画出一个同心圆. 例如: 这道题主要考验的是基础盒模型布局能力和倒圆角属性的巧用. 1.html代码 <body> &l ...
随机推荐
- JVM的垃圾回收机制详解和调优
JVM的垃圾回收机制详解和调优 gc即垃圾收集机制是指jvm用于释放那些不再使用的对象所占用的内存.java语言并不要求jvm有gc,也没有规定gc如何工作.不过常用的jvm都有gc,而且大多数gc都 ...
- jsp的九大内置对象和四大作用域
定义:可以不加声明就在JSP页面脚本(Java程序片和Java表达式)中使用的成员变量? JSP共有以下9种基本内置组件(可与ASP的6种内部组件相对应):? 1.request对象(作用域)? 客户 ...
- poj1129 Channel Allocation
Channel Allocation Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 14361 Accepted: 73 ...
- android gridview画分割线,如图:
1.先上图: 2.具体实现代码: public class LineGridView extends GridView { public LineGridView(Context context) { ...
- UITableViewCell 多选和全选(checkBoxCell)
思路1 一.全选 1.创建可变数组,存储所有未选中状态(NO)的布尔值按钮,点击时改变其状态,并传入按钮的状态. 二.多选 1.创建Cell时,从数组中取出相应的值,传给cell,如果为YES,否则为 ...
- Linux的chattr与lsattr命令
有时候你发现用root权限都不能修改某个文件,大部分原因是曾经用chattr命令锁定该文件了.chattr命令的作用很大,其中一些功能是由Linux内核版本来支持的,不过现在生产绝大部分跑的linux ...
- HTML <map> 设置图热点
需要在一张图片中,设置一个区域为热点就用到了<map> 定义一个客户端图像映射.图像映射(image-map)指带有可点击区域的一幅图像. <img src="planet ...
- Typescript 其实就想排个序和枚举取数
Typescript里的sort和C#差不多,但是略有不太一样,反正官方文档没说明白,就自己研究吧 list =list.sort((n1,n2) => { if(n1 > n2) { r ...
- (原创)AD账户误删导致Exchange邮箱被删 莫苦恼
由于人员变动,离职人员AD账户和邮箱经常要删除.但是在删除AD账户的时候难免会犯错,将在用的用户给删除了,这是个痛苦的事情, 然后你会发现Exchange邮箱也会跟着删除,抓狂了..,还好,幸亏这里进 ...
- JavaScript中sort方法的一个坑(leetcode 179. Largest Number)
在做 Largest Number 这道题之前,我对 sort 方法的用法是非常自信的.我很清楚不传比较因子的排序会根据元素字典序(字符串的UNICODE码位点)来排,如果要根据大小排序,需要传入一个 ...