css3如何做 尖角

css3做尖角的方法：首先创建一个HTML示例文件；然后确定尖角的位置；最后通过给指定div设置属性为“top:6px;left:-3px;border-top:0px;border-bottom...”来实现尖角效果即可。



本教程操作环境：windows7系统、css3版，该方法适用于所有品牌电脑。

推荐：《css视频教程》

尖角在上面

效果图：



代码：


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











 


 

 

 




尖角在下面

效果图：



代码：


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











 


 

 

 




尖角在左边

效果图：



代码：


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











 


 

 

 




尖角在右边

效果图：



代码：


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