這篇文章主要講解了“css怎么制作一個(gè)三角形”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“css怎么制作一個(gè)三角形”吧！

成都創(chuàng)新互聯(lián)自2013年創(chuàng)立以來(lái)，先為山南等服務(wù)建站，山南等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為山南企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問(wèn)題。

在很多頁(yè)面制作中會(huì)設(shè)計(jì)到突出一個(gè)三角，下面給出一種兼容各種瀏覽器的設(shè)計(jì)方法：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

1.   

2.   

3.   

4.       

5.       

6.         

7.         .corner-top{   

8.             width:0px;    

9.             height:0px;   

10.             font-size:0;               

11.             border-width:20px;     

12.             border-style:solid dashed dashed dashed;     

13.             border-color:#e66161 transparent transparent transparent;   

14.         }   

15.         .corner-bottom{   

16.             width:0px;    

17.             height:0px;   

18.             font-size:0;               

19.             border-width:20px;     

20.             border-style:dashed dashed solid dashed;     

21.             border-color:transparent transparent #94e24f transparent;   

22.         }   

23.         .corner-left{   

24.             width:0px;    

25.             height:0px;   

26.             font-size:0;               

27.             border-width:20px;     

28.             border-style:dashed dashed dashed solid;     

29.             border-color:transparent transparent transparent #85bfda;   

30.         }   

31.         .corner-right{   

32.             width:0px;    

33.             height:0px;   

34.             font-size:0;               

35.             border-width:20px;     

36.             border-style:dashed solid dashed dashed;     

37.             border-color:transparent #f3bb5b transparent transparent;   

38.         }   

39.       

40.   

41.   

42.