CSS 三角形

效果：

Test Text
实现代码：
  1. <div>
  2. <span class="arraw down"></span>
  3. <span class="arraw up"></span>
  4. <span class="arraw left"></span>
  5. <span class="arraw right"></span>
  6. Test Text  
  7. </div>
 样式代码：
  1. 	.arraw{ 
  2. 		display: inline-block;
  3. 		width: 0px;
  4. 		height: 0px;
  5. 	}
  6. 	.down{
  7. 		border-top: 12px solid #000;
  8. 		border-right: 6px solid transparent;
  9. 		border-left: 6px solid transparent;
  10. 		border-bottom: 0px solid #000; 
  11. 	}
  12. 	.up{  
  13. 		border-bottom: 12px solid #000;
  14. 		border-right: 6px solid transparent;
  15. 		border-left: 6px solid transparent;
  16. 		border-top: 0px solid #000; 
  17. 	}
  18. 	.left{  
  19. 		border-right: 12px solid #000;
  20. 		border-top: 6px solid transparent;
  21. 		border-bottom: 6px solid transparent;
  22. 		border-left: 0px solid #000; 
  23. 	}
  24. 	.right{  
  25. 		border-left: 12px solid #000;
  26. 		border-top: 6px solid transparent;
  27. 		border-bottom: 6px solid transparent;
  28. 		border-right: 0px solid #000; 
  29. 	}




posted @ 2015-12-18 13:39  乁卬杨  阅读(255)  评论(0)  编辑  收藏  举报