你们好，最近小艾特发现有诸多的小伙伴们对于小三角钢琴，小三角这个问题都颇为感兴趣的，今天小活为大家梳理了下，一起往下看看吧。

1、 Html代码：

2、 div

3、 H3示例1:/h3

4、 ul class='demo'

5、 li class='demo_top'em/em/li

6、 li class='demo_right'em/em/li

7、 li class='demo_bottom'em/em/li

8、 li class='demo_left'em/em/li

9、 /ul

10、 H3示例2:/h3

11、 ul class='demo2'

12、 li class='demo2_top_right'em/em/li

13、 li class='demo2_right_bottom'em/em/li

14、 li class='demo2_bottom_left'em/em/li

15、 li class='demo2_left_top'em/em/li

16、 li class='demo2_right_top'em/em/li

17、 li class='demo2_top_left'em/em/li

18、 li class='demo2_left_bottom'em/em/li

19、 li class='demo2_bottom_right'em/em/li

20、 /ul

21、 H3示例3:/h3

22、 ul class='demo3'

23、 lia href='#'home/a/li

24、 lia href='#'cssem/em/a

25、 ul

26、 Lia href='#' Layout /a/Li

27、 Lia href='# '背景位置/a/li

28、 lia href='#'css hack/a/li

29、 lia href='#'ie6 bug/a/li

30、 /ul

31、 /li

32、 lia href='#'js/a/li

33、 lia href='#'moreem/em/a

34、 ul

35、 lia href='#'css实例/a/李

36、 lia href='#'js实例/a/李

37、 lia href='#'xhtml css实例/a/李

38、 /ul

39、 /li

40、 /ul

41、 /div

42、 Css:body,ul,li{margin:0;padding:0;}

43、 ul{list-style:none;}

44、 div{margin:20px auto 0;width:800px;}

45、 /*demo和demo2风格一致*/

46、 .demo em,demo2 em{position:absolute;display:block;width:0;height:0;}

47、 .demo li,demo2 li{position:relative;float:left;margin-right:40px;}

48、 /*演示风格*/

49、 .demo{height:100px;}

50、 .demo li{width:80px;height:80px;background:#ccc;}

51、 .demo_top em{top:80px;left:20px;border-top:20px solid red;border-right:20px solid transparent;border-left:20px solid transparent;}

52、 .demo_right em{top:20px;left:-20px;border-top:20px solid transparent;border-right:20px solid green;border-bottom:20px solid transparent;}

53、 .demo_bottom em{top:-20px;left:20px;border-right:20px solid transparent;border-bottom:20px solid blue;border-left:20px solid transparent;}

54、 .demo_left em{top:20px;left:80px;border-top:20px solid transparent;border-bottom:20px solid transparent;border-left:20px solid yellow;}

55、 /*演示2风格*/

56、 .demo2{height:80px;}

57、 .demo2 li{width:60px;height:40px;background:#ccc;}

58、 .demo2_top_right em{top:40px;left:20px;border-top:20px solid red;border-right:20px solid transparent;}

59、 .demo2_right_top em{top:10px;left:-20px;border-right:20px solid green;border-top:20px solid transparent;}

60、 .demo2_right_bottom em{top:10px;left:-20px;border-right:20px solid green;border-bottom:20px solid transparent;}

61、 .demo2_bottom_right em{top:-20px;left:20px;border-bottom:20px solid blue;border-right:20px solid transparent;}

62、 .demo2_bottom_left em{top:-20px;left:20px;border-bottom:20px solid blue;border-left:20px solid transparent;}

63、 .demo2_left_bottom em{top:10px;left:60px;border-left:20px solid yellow;border-bottom:20px solid transparent;}

64、 .demo2_left_top em{top:10px;left:60px;border-left:20px solid yellow;border-top:20px solid transparent;}

65、 .demo2_top_left em{top:40px;left:20px;border-top:20px solid red;border-left:20px solid transparent;}

66、 /*demo3风格*/

67、 .demo3 li{float:left;padding:0 5px;background:#ccc;line-height:30px;}

68、 .demo3 li a{display:block;padding:0 5px;text-decoration:none;}

69、 .demo3 li a em{display:inline-block;border-top:5px solid #000;border-right:5px solid transparent;border-left:5px solid transparent;vertical-align:middle;}

70、 .demo3 li ul{display:none;}

71、 .demo3 li a:hover{color:red;}

72、 .demo3 li:hover ul{display:block;position:absolute;}

73、 .demo3 li a:hover em{border-top:none;border-right:5px solid transparent;border-bottom:5px solid #000;border-left:5px solid transparent;}

74、 .clear{clear:both;}

以上就是小三角这篇文章的一些介绍，希望对大家有所帮助。