假设页面中有个div，如何通过css做一个三角形。这是我们项目中用到的今天就稍微总结下。顺便说一句偷偷写博客的感觉还挺爽

div {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid green;
    border-left: 20px solid transparent;
}
我们通过border-top，border-bottom来撑起三角形的昨天那条线一定要记得设置transparent这个属性的意思为透明，然后用border-left撑起右边角到左边线的距离。并且设置颜色红色。
												


											
如果用css的border属性画一个三角形的更多相关文章
	

    
								
  1. Effective前端3：用CSS画一个三角形
		
    p { text-indent: 2em } .triangle-container p { text-indent: 0 } img { margin: 15px 0 } 三角形的场景很常见,打开一 ...
    
		
    2. 
						
  2. Effective前端(3)用CSS画一个三角形
		
    来源:https://zhuanlan.zhihu.com/p/26160325 三角形的场景很常见,打开一个页面可以看到各种各样的三角形: 由于div一般是四边形,要画个三角形并不是那么直观.你可以 ...
    
		
    3. 
						
  3. CSS画一个三角形，CSS绘制空心三角形，CSS实现箭头
		
     壹 ❀ 引 这两天因为项目工作较少,闲下来去看了GitHub上关于面试题日更收录的文章,毕竟明年有新的打算.在CSS收录中有一题是 用css创建一个三角形,并简述原理 .当然对于我来说画一个三角形是 ...
    
		
    4. 
						
  4. OpenGL学习笔记(1) 画一个三角形
		
    最近找实习有一丢丢蛋疼,沉迷鬼泣5,四周目通关,又不想写代码,写篇笔记复习一下,要好好学图形学啊 用OpenGL画一个三角形 项目的简介 记录一下跟着learnOpenGL学习的过程 笔记里的代码放在 ...
    
		
    5. 
						
  5. 【十天自制软渲染器】DAY 03：画一个三角形（向量叉乘算法 & 重心坐标算法）
		
    如果你喜欢我写的文章,可以把我的公众号设为星标 ,这样每次有更新就可以及时推送给你啦. 前面两天画了点和线,今天我们来画一个最简单也是最强大的面--三角形. 本文主要讲解三角形绘制算法的推导和思路(只 ...
    
		
    6. 
						
  6. 重温CSS：Border属性
		
    边界是众所周知的,有什么新的东西吗?好吧,我敢打赌,在这篇文章中,有很多你不看永远不知道的东西! 不仅可以用CSS3来创建圆角,使用原有CSS一样可以显示自定义图形.这是正确的(有待考究):在过去,没 ...
    
		
    7. 
						
  7. Effective前端1---chapter 2 用CSS画一个三角形
		
    1.CSS画三角形的画法 第一步:三角形可以用border画出来,首先一个有四个border的div长这样: <div class="triangle"></di ...
    
		
    8. 
						
  8. css 利用border属性制作箭头  Using Borders to Make Pure CSS Arrows
		
    不再需要多余的图片 用border属性自然能创造箭头效果 学习地址:http://tech.patientslikeme.com/2010/11/09/using-borders-to-make-pu ...
    
		
    9. 
						
  9. 利用css的border实现画三角形思路原理
		
    1.利用Css 的border绘制三角形的原理: div的border是有宽度和颜色的,当div的宽度比较大的时候,比如上面代码每个边100像素,颜色又不一样,浏览器怎么渲染颜色呢?经测试发现,宽度较 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 在 case 语句中使用字符串-转
			
    http://www.cnblogs.com/del/archive/2008/07/08/1237856.html 非常遗憾 Delphi 的 case 语句不支持字符串, 但我觉得这也可能是基于效 ...
    
			
    2. 
						
  2. jQuery Validate验证框架详解
			
    转自:http://www.cnblogs.com/linjiqin/p/3431835.html jQuery校验官网地址:http://bassistance.de/jquery-plugins/ ...
    
			
    3. 
						
  3. RPC原理及RPC实例分析
			
    在学校期间大家都写过不少程序,比如写个hello world服务类,然后本地调用下,如下所示.这些程序的特点是服务消费方和服务提供方是本地调用关系. 1 2 3 4 5 6 public class  ...
    
			
    4. 
						
  4. iPhone开发基础教程_第二章
			
    1.各个子文件夹的作用        Classes:                    编写的大多代码都保存在这里,其中包括所有的Objective-C类,可以在Classes文件夹下创建一些子 ...
    
			
    5. 
						
  5. Vim 插入递增列
			
    <C-a> ++1 <C-x> --1     安装Plugin 'terryma/vim-multiple-cursors'后 <C-v> 选所有数字 <C ...
    
			
    6. 
						
  6. js 继承 对象方法与原型方法
			
    js函数式编程确实比很多强语言使用灵活得多,今天抽了点时间玩下类与对象方法调用优先级别,顺便回顾下继承 暂时把原型引用写成继承 先看看简单的两个继承 var Parent = function(){} ...
    
			
    7. 
						
  7. SQL 提高查询效率
			
    1.关于SQL查询效率,100w数据,查询只要1秒,与您分享: 机器情况p4: 2.4内存: 1 Gos: windows 2003数据库: ms sql server 2000目的: 查询性能测试, ...
    
			
    8. 
						
  8. 解决FF浏览器无法执行window.close()脚本
			
    在FF浏览器中输入about:config 查找dom.allow_scripts_to_close_windows 将值改为true
    
			
    9. 
						
  9. 深入浅出 妙用Javascript中apply、call、bind
			
    apply.call 在 javascript 中,call 和 apply 都是为了改变某个函数运行时的上下文(context)而存在的,换句话说,就是为了改变函数体内部 this 的指向. Jav ...
    
			
    10. 
						
  10. MySql怎样去掉某个字段最后的逗号或最后的字
			
    update 表 set 字段=left(字段,char_length(字段)-1) where right(字段,1)=',';
    
			
    11.