看到有面试题里会有问到如何用css画出三角形

众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状

画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及颜色。

如果你将宽度调的足够大,改变不同方向的颜色,你就可以发现盒模型的border是四个梯形一样的线条。

这个时候如果将盒模型内部的height,width调为0px,则三角形就形成了。

 border:100px solid transparent   //边框100px,实线,透明颜色,下面三行代码等同于此句
border-width:15px;        //border-width代表所有方向的border
border-style:solid;
border-color:transparent;

如果你看明白了原理那么现在你应该已经可以自己写出代码了。

     width: 0;
height: 0;
border-left: 50px solid transparent;    //左边宽度50px,实线,透明颜色
border-right: 50px solid transparent;    //右边同上
border-top: 100px solid red;        //上边宽度100px,实线,红色

上面这段代码可以生成一个向下的三角形。如下图所示(为便于理解我替换了右边的颜色)

由这个效果图我们可以看出,要生成一个三角形我们需要三条边框。

左右边框的高度会决定三角形的高有多长。

三角形高度则由边框自己的宽度决定

那么如何生成一个指向右下或者左下之类的这样的三角呢?

相信大家已经通过上面的图看出来了。

我们只需要两条边框就够了。

     width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;

这段代码就会生成一个指向左下的三角形,底和高都是100px。

还记不记得border-width。

它可以用一句代码定义四条边框的宽度。

转载请联系

用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画个三角形

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

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

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

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

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

  8. CSS画一个三角形,CSS绘制空心三角形,CSS实现箭头

     壹 ❀ 引 这两天因为项目工作较少,闲下来去看了GitHub上关于面试题日更收录的文章,毕竟明年有新的打算.在CSS收录中有一题是 用css创建一个三角形,并简述原理 .当然对于我来说画一个三角形是 ...

  9. Effective前端3:用CSS画一个三角形

    p { text-indent: 2em } .triangle-container p { text-indent: 0 } img { margin: 15px 0 } 三角形的场景很常见,打开一 ...

随机推荐

  1. 电脑只有网页打不开,QQ和其他软件都能用

    应该就是浏览器设置代理服务器的问题 1.打开浏览器->找到工具->internet选项->链接->局域网设置 将代理服务器下面勾去掉

  2. solr4.3 java.lang.NumberFormatException

    solr java.lang.NumberFormatException 现象:定时每天全量,每隔5分钟增量DIH从mysql导入数据 solr4j返回加过Id列表,一天偶然出现 java.lang. ...

  3. Python for Infomatics 第14章 数据库和SQL应用二(译)

    14.4 创建数据库和表 相比Python的列表和字典,数据库需要更多的已定义结构. 在我们创建数据库表之前,我们必须预先告诉数据库表和列的命名,以及计划保存到列中和数据类型.当数据库软件预先知道每列 ...

  4. [BZOJ3754]Tree之最小方差树

    3754: Tree之最小方差树 Time Limit: 20 Sec  Memory Limit: 256 MBSubmit: 402  Solved: 152[Submit][Status][Di ...

  5. C# base64 Img 互转

    [AcceptVerbs(HttpVerbs.Post)] public JsonResult Upload(HttpPostedFileBase fileData) { try { if (file ...

  6. jmobile学习之路 ----设备检测

    用一个库,device.js.这是一种最简单的方法.device.js库,不依赖jQuery框架. <!doctype html> <html lang="en" ...

  7. 算法_bitmap算法

    概述 所谓bitmap就是用一个bit位来标记某个元素对应的value,而key即是这个元素.由于采用bit为单位来存储数据,因此在可以大大的节省存储空间     算法思想 32位机器上,一个整形,比 ...

  8. cocoapods

    iOS 最新版 CocoaPods 的安装流程 1.移除现有Ruby默认源 $gem sources --remove https://rubygems.org/ 2.使用新的源 $gem sourc ...

  9. VS2010 中,windows服务不能添加 System.Web 引用

    今天在写windows服务的时候,右键添加引用->.NET中没有找到System.Web,在->Recent中找到System.Web,但添加完后却显示黄色叹号,最后百度一下解决了这个问题 ...

  10. ScrollView嵌套RecyclerView时滑动出现的卡顿

    原文连接:http://zhanglu0574.blog.163.com/blog/static/113651073201641853532259/   现象: 一个界面有多个RecyclerView ...