使用CSS展示各种形状的三角形

阅读更多

今天带来的是用纯css样式来绘制三角形。直接进入代码:

先来解释几个样式:

solid:表示线条为实线。常用的线条有:dotted(点线)、dashed(虚线)

transparent:表示线条为透明。

 

先来看下代码的基本结构:



	
		
		三角展示
				
	
	
		

 很简单的一段代码,只有一个div标签,id为div1。

 

1、上三角     

 
2、下三角       

 
 3、左三角   

4、右三角

 
 5、左上三角  


 6、右上三角使用CSS展示各种形状的三角形_第1张图片

 
7、左下三角使用CSS展示各种形状的三角形_第2张图片

 
8、右下三角使用CSS展示各种形状的三角形_第3张图片

 

三角形的绘制到此结束,有没有觉得很好玩呢?

 

 

 

  • 使用CSS展示各种形状的三角形_第4张图片
  • 大小: 1.4 KB
  • 使用CSS展示各种形状的三角形_第5张图片
  • 大小: 1.4 KB
  • 使用CSS展示各种形状的三角形_第6张图片
  • 大小: 1.4 KB
  • 使用CSS展示各种形状的三角形_第7张图片
  • 大小: 1.3 KB
  • 使用CSS展示各种形状的三角形_第8张图片
  • 大小: 1.5 KB
  • 使用CSS展示各种形状的三角形_第9张图片
  • 大小: 1.7 KB
  • 使用CSS展示各种形状的三角形_第10张图片
  • 大小: 1.4 KB
  • 使用CSS展示各种形状的三角形_第11张图片
  • 大小: 1.6 KB
  • 查看图片附件

你可能感兴趣的:(使用CSS展示各种形状的三角形)