关于Html和CSS绘制三角形图标的方法


本文摘自PHP中文网,作者不言,侵删。

这篇文章主要为大家详细介绍了Html+CSS绘制三角形图标的相关代码,很多网页都有三角形的图标,通常是切的图片,这里可以用css3+html写出三角形,感兴趣的小伙伴们可以参考一下

先看看效果图:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        #test1 {  

            height:20px;  

            width:20px;  

            border-color:#FF9600 #3366ff #12ad2a #f0eb7a;  

            border-style:solid;  

            border-width:20px;  

        }  

        #test2 {  

            height:0;  

            width:0;  

            overflow: hidden; /* 这里设置overflow, font-size, line-height */  

            font-size: 0;     /*是因为, 虽然宽高度为0, 但在IE6下会具有默认的 */  

            line-height: 0;  /* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */  

            border-color:#FF9600 #3366ff #12ad2a #f0eb7a;  

            border-style:solid;  

            border-width:20px;  

        }  

        #test3 {  

            height:0;  

            width:0;  

            overflow: hidden;  

            font-size: 0;  

            line-height: 0;  

            border-color:#FF9600 transparent transparent transparent;  

            border-style:solid;  

            border-width:20px;  

        }  

        #test4 {  

            height:0;  

            width:0;  

            overflow: hidden;  

            font-size: 0;  

            line-height: 0;  

            border-color:#FF9600 transparent transparent transparent;  

            border-style:solid dashed dashed dashed;  

            border-width:20px;  

        }/*兼容IE6*/  

        #test5 {  

            height:0;  

            width:0;  

            overflow: hidden;  

            font-size: 0;  

            line-height: 0;  

            border-color:#FF9600 #3366ff transparent transparent;  

            border-style:solid solid dashed dashed;  

            border-width:40px 40px 0 0 ;  

        }  

    </style>

</head>

<body>

    <p id="test1"></p><br>

    <p id="test2"></p><br>

    <p id="test3"></p><br>

    <p id="test4"></p><br>

    <p id="test5"></p><br>

</body>

</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

用HTML5 Canvas来绘制三角形和矩形等多边形的方法

使用HTML5和CSS3实现生日蛋糕的制作

以上就是关于Html和CSS绘制三角形图标的方法的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

Html实现在消息按钮上增加数量角标的实现代码

css中定位position属性的用法是什么

css怎么引用外部ttf字体?

css :not()选择器怎么用

css right是什么意思?

css vw是什么单位

Html css js 区别是什么

css keyframes 是什么

css怎样设置背景透明

如何使用内嵌式引入css样式表

更多相关阅读请进入《Html》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...