Triangle Up
 






 










1


2


3


4


5


6


7






#triangle-up {


    width: 0;


    height: 0;


    border-left: 50px solid transparent;


    border-right: 50px solid transparent;


    border-bottom: 100px solid red;


}












　　




Triangle Down


 








 










1


2


3


4


5


6


7






#triangle-down {


    width: 0;


    height: 0;


    border-left: 50px solid transparent;


    border-right: 50px solid transparent;


    border-top: 100px solid red;


}












　　




Triangle Left


 








 










1


2


3


4


5


6


7






#triangle-left {


    width: 0;


    height: 0;


    border-top: 50px solid transparent;


    border-right: 100px solid red;


    border-bottom: 50px solid transparent;


}














Triangle Right


 








 










1


2


3


4


5


6


7






#triangle-right {


    width: 0;


    height: 0;


    border-top: 50px solid transparent;


    border-left: 100px solid red;


    border-bottom: 50px solid transparent;


}














Triangle Top Left


 








 










1


2


3


4


5


6






#triangle-topleft {


    width: 0;


    height: 0;


    border-top: 100px solid red;


    border-right: 100px solid transparent;


}














Triangle Top Right


 








 










1


2


3


4


5


6


7






#triangle-topright {


    width: 0;


    height: 0;


    border-top: 100px solid red;


    border-left: 100px solid transparent;


 


}














Triangle Bottom Left


 








 










1


2


3


4


5


6






#triangle-bottomleft {


    width: 0;


    height: 0;


    border-bottom: 100px solid red;


    border-right: 100px solid transparent;


}














Triangle Bottom Right


 








 










1


2


3


4


5


6






#triangle-bottomright {


    width: 0;


    height: 0;


    border-bottom: 100px solid red;


    border-left: 100px solid transparent;


}












												


											
css生成三角形的更多相关文章
	

    
								
  1. 三种纯CSS实现三角形的方法
		
    看到像上图这样的 tip 的小三角,你会怎么办? 切个图上去?恩,不错,简单,兼容性也一级棒,不但好控制,那点小东西也增加不了多少图片的大小.但有没有更好更讲究技巧的办法呢?哈哈,那必须有啊,而且还不 ...
    
		
    2. 
						
  2. CSS制作三角形和按钮
		
    CSS制作三角形和按钮 用上一篇博文中关于边框样式的知识点,能制作出三角形和按钮. 我先说如何制作三角形吧,相信大家在平时逛网站的时候都会看到一些导航栏中的三角形吧,比如说: 网易首页的头部菜单栏中, ...
    
		
    3. 
						
  3. CSS 魔法系列：纯 CSS 绘制三角形（各种角度）
		
    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
    
		
    4. 
						
  4. CSS 制作三角形原理剖析
		
    使用css制作三角形其实原理很简单,下面一步步解析. 1.html代码如下 <div class="triangle"> </div> 2.CSS代码 .t ...
    
		
    5. 
						
  5. CSS实现三角形
		
    突然想起搞一把三角形. 简单来说: 建一个div  宽度.高度设为0 添加两个样式: border 和 border-color 如果需要一个三角形把其他边框都设为透明 transparent < ...
    
		
    6. 
						
  6. css绘制三角形原理
		
    1.新建一个元素,将它的宽高都设置为0:然后通过设置border属性来实现三角形效果,下面是css绘制三角形的原理: <!DOCTYPE html> <html> <he ...
    
		
    7. 
						
  7. 纯CSS写三角形-border法
		
    (1)有边框的三角形 我们来写下带边框的三角形. 如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要 ...
    
		
    8. 
						
  8. 经典CSS实现三角形图标原理解析
		
    前言: 在写这篇文章之前,我也看过很多前端大神写的代码,But,都只是粘贴代码和给出显示效果,对于初学者来说大家都喜欢刨根问底,为什么要这样做呢? 接下来就让我给大家分享一下我对CSS实现三角形的理解 ...
    
		
    9. 
						
  9. 用css制作三角形
		
    用css制作三角形,主要是利用css元素给“盒模型”设置边框得到的. 上图,上边框和做边框,以及上边框和右边框的交合处,浏览器会按照直角的二分之一处绘制交合线.这是“盒模型”有宽和高时候的效果.我们假 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 【转】H.264（H264）视频文件的制作
			
    转自:http://blog.csdn.net/caoshangpa/article/details/51166109 一.准备工作 1.下载并安装优酷客户端 2.下载ffmpeg可执行文件,解压可用 ...
    
			
    2. 
						
  2. 动态规划初级 入门理解 C#代码
			
      using System; using System.Collections.Generic; using System.Linq; using System.Text; using Micros ...
    
			
    3. 
						
  3. C#Virtual和Override的几种组合
			
    情况1: class A{public void Show()} class B:A{public void Show()} 编译通过,有警告让在B的方法里添加new关键字,以便将A的方法隐藏 编译时 ...
    
			
    4. 
						
  4. self.navigationItem.titleView   不居中显示的问题
			
    自定义一个AUIView, AUIView * v=[AUIView new]; self.navigationItem.titleView = v; 在AUIView类内重写 setFrame -  ...
    
			
    5. 
						
  5. CENTOS 下安装APK反编译工具 APKTOOL
			
    转于:http://www.qiansw.com/centos-apk-apktool.html 我使用的是CentOS6.4 64位的系统.首先需要下载两个包.这里下载:https://code.g ...
    
			
    6. 
						
  6. 点滴积累【JS】---JS小功能（JS实现匀速运动）
			
    效果: 思路: 利用setInerval()计时器,进行运动.然后关键的一点是在最后停止的时候给它一个填充缝隙的判断. 代码: <head runat="server"> ...
    
			
    7. 
						
  7. EF检索中文失败的解决办法
			
    1. MYSQL: 保证所有的的列都是UTF8格式. 2. VS2010: 在data server建立连接时,选择advance,将chracterset设成utf8,这样在VS2010里查看和更改 ...
    
			
    8. 
						
  8. tensorflow 之模型的保存与加载(二)
			
    上一遍博文提到 有些场景下,可能只需要保存或加载部分变量,并不是所有隐藏层的参数都需要重新训练. 在实例化tf.train.Saver对象时,可以提供一个列表或字典来指定需要保存或加载的变量. #!/ ...
    
			
    9. 
						
  9. 【Objective-C】02-Objective-C学习及iOS开发的准备
			
    前言 由于大部分朋友对iOS开发还是有比较多的疑问,比如是不是一定要买iPhone和苹果笔记本才能做iOS开发?因此,这讲就为广大有意学习iOS开发的朋友们进行解惑. 一.什么是iOS开发 iOS是由 ...
    
			
    10. 
						
  10. linux学习笔记13--命令head和tail
			
    head 与 tail 就像它的名字一样的浅显易懂,它是用来显示开头或结尾某个数量的文字区块,head 用来显示档案的开头至标准输出中,而 tail 想当然尔就是看档案的结尾. 1．命令格式: hea ...
    
			
    11.