看到有面试题里会有问到如何用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画出三角形的更多相关文章

  1. 用css画出三角形

    看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...

  2. 用css画出三角形【转】

    看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...

  3. css 画出三角形

    技术分享不一定行文累赘 这里说说最简洁的 css 画出三角形 display: inline-block; border: 10px dashed transparent; border-left: ...

  4. CSS画出三角形(利用Border)

    画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及颜色. 如果你将宽度调的足够大,改变不同方向的颜色,你就可以发现盒模型的border是四个梯形一样的线条. div{ width ...

  5. 用css画出对话框

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAa4AAAFSCAYAAACqpTv4AAAgAElEQVR4nO3deZBU5b3GcUIlVTG3bi

  6. 用纯css画个三角形

    用纯css画个三角形以下是源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  7. css写出三角形(兼容IE)

    css写出三角形   利用css写三角形,兼容IE7 .arrow-up { width:0px; height:0px; border-left:10px solid transparent; bo ...

  8. 如何用css实现一个三角形?

    昨天被人问到说如何用css实现一个三角形?em....  当时被问到了,汗颜,今天找了一些帖子看了一下,也算是记录一下吧 代码如下: 实现效果:

  9. 用HTML+CSS画出一个同心圆

    参加web前端校招的同学们经常会遇到这样的面试题:用HTML+CSS画出一个同心圆. 例如: 这道题主要考验的是基础盒模型布局能力和倒圆角属性的巧用. 1.html代码 <body> &l ...

随机推荐

  1. JVM的垃圾回收机制详解和调优

    JVM的垃圾回收机制详解和调优 gc即垃圾收集机制是指jvm用于释放那些不再使用的对象所占用的内存.java语言并不要求jvm有gc,也没有规定gc如何工作.不过常用的jvm都有gc,而且大多数gc都 ...

  2. jsp的九大内置对象和四大作用域

    定义:可以不加声明就在JSP页面脚本(Java程序片和Java表达式)中使用的成员变量? JSP共有以下9种基本内置组件(可与ASP的6种内部组件相对应):? 1.request对象(作用域)? 客户 ...

  3. poj1129 Channel Allocation

    Channel Allocation Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 14361   Accepted: 73 ...

  4. android gridview画分割线,如图:

    1.先上图: 2.具体实现代码: public class LineGridView extends GridView { public LineGridView(Context context) { ...

  5. UITableViewCell 多选和全选(checkBoxCell)

    思路1 一.全选 1.创建可变数组,存储所有未选中状态(NO)的布尔值按钮,点击时改变其状态,并传入按钮的状态. 二.多选 1.创建Cell时,从数组中取出相应的值,传给cell,如果为YES,否则为 ...

  6. Linux的chattr与lsattr命令

    有时候你发现用root权限都不能修改某个文件,大部分原因是曾经用chattr命令锁定该文件了.chattr命令的作用很大,其中一些功能是由Linux内核版本来支持的,不过现在生产绝大部分跑的linux ...

  7. HTML <map> 设置图热点

    需要在一张图片中,设置一个区域为热点就用到了<map> 定义一个客户端图像映射.图像映射(image-map)指带有可点击区域的一幅图像. <img src="planet ...

  8. Typescript 其实就想排个序和枚举取数

    Typescript里的sort和C#差不多,但是略有不太一样,反正官方文档没说明白,就自己研究吧 list =list.sort((n1,n2) => { if(n1 > n2) { r ...

  9. (原创)AD账户误删导致Exchange邮箱被删 莫苦恼

    由于人员变动,离职人员AD账户和邮箱经常要删除.但是在删除AD账户的时候难免会犯错,将在用的用户给删除了,这是个痛苦的事情, 然后你会发现Exchange邮箱也会跟着删除,抓狂了..,还好,幸亏这里进 ...

  10. JavaScript中sort方法的一个坑(leetcode 179. Largest Number)

    在做 Largest Number 这道题之前,我对 sort 方法的用法是非常自信的.我很清楚不传比较因子的排序会根据元素字典序(字符串的UNICODE码位点)来排,如果要根据大小排序,需要传入一个 ...