如何用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 ...
随机推荐
- 用ccproxy + stunnel做个加密代理
https://www.stunnel.org/downloads.html ccproxy + stunnel做个加密http代理和socks5代理 目前国内用户无法访问某些国外网站,如http:/ ...
- Android中分页滑动实现总结
手机的屏幕相对较小,因此会出现当有多项内容需要展示而不得不进行分页的情况.例如手机桌面的应用图标的展示.一般一屏可以显示4*4=16个小方块形的应用程序,可以通过左右滑动进行屏幕的选择.而Androi ...
- http协议(四)http状态码
一:http状态码 表示客户端http请求的返回结果.标记服务器端的处理是否正常.通知出现的错误等工作 状态码的类别如下: http状态码种类繁多,大概有60多种,实际上经常使用的只有14种,下面为一 ...
- linux addr2line 定位so库崩溃位置
在Linux下写C/C++程序的程序员,时常与Core Dump相见.在内存越界访问,收到不能处理的信号,除零等错误出现时,我们精心或不精心写就的程序就直接一命呜呼了,Core Dump是Linux仁 ...
- c++ 副本构造器
我们都知道两个指针指向同一个变量时如果一个指针被释放那么另一个就会出问题 为了说明问题我做了一个很恶心的小例子 class C { public : C(int v) { ptrInt=new int ...
- 基于DDD的.NET开发框架 - ABP工作单元(Unit of Work)
返回ABP系列 ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)”的简称. ASP.NET Boilerplate是一个用最佳实践和流行技术开发现代WEB应 ...
- 为什么我们的web前端变的越来越复杂
前端发展了也有些年头了,曾记得很多年前,聊起前端,都觉得是很简单,那个时候都没有前端工程师这个职位.可现在,前端已经逆袭了,已经不是原来的样子了,各种技术层出不穷,显的越来越高深莫测了.前端真的变得那 ...
- UWP 快速的Master/Detail实现
最近在写快报(还没有写完)的过程中,一开始就遇到了这个Master/Detail如何实现的问题. 微软给出Demo并不符合要求,搜索后找到了今日头条开发者写的一篇 :实现Master/Detail布局 ...
- SQLServer数据导入Mongodb
一.思路 MongoVUE免费版支持MySQL导入Mongo,所以思路是SQLServer导入MySQL,再从MySQL导入Mongo. 二.准备 1,安装mysql数据库(我用的是WAMP,集成my ...
- 在SSIS 2012中使用CDC(数据变更捕获)
最新项目稍有空隙,开始研究SQL Server 2012和2014的一些BI特性,参照(Matt)的一个示例,我们开始体验SSIS中的CDC(Change Data Capture,变更数据捕获). ...