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. Linux命令-网络命令:setup
			
    setup 进入设置网络信息的界面 上图中选“网络配置”进入设置网络信息 上图中选“设备配置”进行配置IP地址,下图显示网卡信息 上图中,选择“eth0”回车进入设置eth0网卡信息界面 上图中选择“ ...
    
			
    2. 
						
  2. jQuery Accordion   插件用于创建折叠菜单
			
    jQuery Accordion 插件用于创建折叠菜单.它通常与嵌套的列表.定义列表或嵌套的 div 一起使用.选项用于指定结构.激活的元素和定制的动画. 后期完善
    
			
    3. 
						
  3. LNMP架构
			
    LNMP架构介绍 lnmp里的php会启动一个服务,nginx把用户请求的php交给php-fpm处理,比如登录网站php要和mysql做交互,查用户的账号和密码,处理完之后,php-fpm会告诉ng ...
    
			
    4. 
						
  4. unity, Global和Local编辑模式
			
    下图表示是在Local模式下: 下图表示是在Global模式下: 不要搞反.
    
			
    5. 
						
  5. 基于maven的ssh框架一步一步搭建（一）
			
    一.新建maven项目,配置ssh框架pom的最低支持 1.新建一个maven项目 2.添加一个web.xml ? 1 2 3 4 5 6 7 8 9 <?xml version="1 ...
    
			
    6. 
						
  6. TypeScript 入门指南
			
    你是否听过 TypeScript? TypeScript 是微软开发的 JavaScript 的超集,TypeScript兼容JavaScript,可以载入JavaScript代码然后运行.TypeS ...
    
			
    7. 
						
  7. emacs 中使用git diff命令行
			
    在shell中执行git diff命令,常常会看到例如以下警告信息: terminal is not fully functional 事实上非常easy,配置一下就可以. git config -- ...
    
			
    8. 
						
  8. 最全面的 Sublime Text 使用指南
			
    最全面的 Sublime Text 使用指南   摘要(Abstract) 本文系统全面的介绍了Sublime Text,旨在成为最优秀的Sublime Text中文教程. 前言(Prologue)  ...
    
			
    9. 
						
  9. 2.请求库之requests
			
    requests模块阅读目录: 介绍 基于GET请求 基于POST请求 响应Response 高级用法 一.介绍 #介绍:使用requests可以模拟浏览器的请求,比起之前用到的urllib,requ ...
    
			
    10. 
						
  10. hbase replication原理分析
			
    本文只是从总体流程来分析replication过程,很多细节没有提及,下一篇文章准备多分析分析细节.   replicationSource启动过程 org.apache.hadoop.hbase.r ...
    
			
    11.