css实现箭头和带缺口提示框


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

一、实现如图所示箭头

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

<!DOCTYPE html>

<html>

<head>

    <title></title>

<style type="text/css">

.out{

    width: 200px;

    height: 200px;

    background: #f00;

    position: relative;

}

.word{

    position: absolute;

    left: 60px;

    line-height: 40px;

}

.triangle-out{

    position: absolute;

    top: 0px;

    left: 0px;

    width: 0px;

    height: 0px;

    display: block;

    border-top: 20px solid #f00;

    border-right: 20px solid #f00;

    border-bottom: 20px solid #f00;

    border-left: 40px solid #ff0;

}

.triangle-in{

    position: absolute;

    top: 0px;

    left: 0px;

    width: 0px;

    height: 0px;

    display: block;

    border-top: 20px solid transparent;

    border-right: 20px solid transparent;

    border-bottom: 20px solid transparent;

    border-left: 20px solid #f00;

}

</style>

</head>

<body>

    <p class="out">

        <span class="triangle-out"></span>

        <span class="triangle-in"></span>

        <span class="word">read more</span>

    </p>

</body>

</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

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>带缺口的提示框-/</title>

<style>

.wrap{

    font-size: 12px;

    margin:40px auto;

    width:600px;

}

.ui-slider-tooltip{

    background:#FCFDFD;

    border:1px solid green;

    color:#222222;

    display: block;

    text-align: center;

    padding: 5px 3px 5px 3px;

    width: 190px;  

    position: relative;

}

.ui-corner-all {

    -moz-border-radius-bottomleft:5px;

    -moz-border-radius-bottomright:5px;

    -moz-border-radius-topleft:5px;

    -moz-border-radius-topright:5px;

    -webkit-border-top-left-radius:5px 5px;

    -webkit-border-top-right-radius:5px 5px;

    -webkit-border-bottom-right-radius:5px 5px;

    -webkit-border-bottom-left-radius:5px 5px;

}

.ui-tooltip-pointer-down {

    border-bottom-width: 0;

    border-left: 7px dashed transparent;

    border-right: 7px dashed transparent;

    border-top: 8px solid green;

    bottom: -8px;

    display: block;

    height:0;

    left: 50%;

    margin-left: -7px;

    position: absolute;

    width:0;

}

 

.ui-tooltip-pointer-down-inner {

    border-left: 6px dashed transparent;

    border-right: 6px dashed transparent;

    border-top: 7px solid #fff;

    left: -6px;

    top: -9px;

    position: absolute;

}

 

.a{

    display: block;width:0;height:0;

    border-left: 7px dashed transparent;

    border-right: 7px dashed transparent;

    border-top: 8px solid green;

    border-bottom: 0;

    position: absolute;

}

.b{

    position: absolute;

    border-left: 6px dashed transparent;

    border-right: 6px dashed transparent;

    border-top: 7px solid #fff;

    top: -9px;

    left: -6px;

}

</style>

</head>

<body>

<p class="wrap">

    <h1>用CSS实现带缺口的提示框</h1>

    <span class="a">

        <span class="b"></span>

    </span>

    <br/>

    <span class="a">

        <span class="b" style="top:-11px;"></span>

    </span>

    <br/>

 

 

    <span class="ui-slider-tooltip  ui-corner-all">

        <span>带缺口提示框</span>

        <span class="ui-tooltip-pointer-down">

        <span class="ui-tooltip-pointer-down-inner" ></span>

        </span>

    </span>

    <br/>

    <span class="ui-slider-tooltip  ui-corner-all" style="background: #f00">

        <span>加个背景就可以看清原理啦</span>

        <span class="ui-tooltip-pointer-down">

        <span class="ui-tooltip-pointer-down-inner" ></span>

        </span>

    </span>

</p>

</p>

</body>

</html>

其实就是利用宽度高度为0的box,设置border,得到想要的三角形,通过三角形的叠加显示制作出箭头的效果~

本文讲解了css实现箭头和带缺口提示框 ,更多相关内容请关注php中文网。

相关推荐:

前端工程师学习基础知识

关于JavaScript基础

关于面向对象设计的相关讲解的相关讲解

以上就是css实现箭头和带缺口提示框的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

css top不起作用怎么办

css怎么隐藏input

css font-family属性怎么用

css如何设置元素水平垂直居中显示

css怎么设置草书字体

html和css是什么语言?

css怎么设置浮动

编写css文件要写head吗

css background-repeat属性怎么用

css设置背景图大小该怎么做

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




打赏

取消

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

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

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

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

评论

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

    正在狠努力加载,请稍候...