CSS边角折叠实战

时间 2019-11-18

标签 css 边角折叠实战栏目 CSS 繁體版

原文原文链接

在大量的网页设计做品中，都用到了这种折叠效果，一般用于标题背景。通常能够用PhotoShop来实现这样的效果，可是在当今普遍提倡减小网页图片使用量的状况下，咱们仍是少用图片为好。其实使用CSS是能够很容易地实现这种效果的，废话少说，直接上代码： css

01	<!DOCTYPE html>

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

03

 <head> 

04	<meta charset="utf-8">

05	<title>CSS Shapes</title>

06	<style type="text/css">

07

 <!-- 

08	#container {

09	background: #666;

10	margin: auto;

11	width: 500px;

12	height: 700px;

13	padding-top: 30px;

14

}

15

 h1 { 

16	background: #e3e3e3;

17	background: -moz-linear-gradient(top, #e3e3e3, #c8c8c8);

18	background: -webkit-gradient(linear, left top, left bottom, from(#e3e3e3), to(#c8c8c8));

19	padding: 10px 20px;

20	margin-left: -20px;

21	margin-top: 0;

22	position: relative;

23	width: 70%;

24	-moz-box-shadow: 1px 1px 3px #292929;

25	-webkit-box-shadow: 1px 1px 3px #292929;

26	box-shadow: 1px 1px 3px #292929;

27	color: #454545;

28	text-shadow: 0 1px 0 white;

29

}

30

 .arrow { 

31

     width: 0; 

32	height: 0;

33	line-height: 0;

34	border-left: 20px solid transparent;

35	border-top: 10px solid #c8c8c8;

36	top: 104%;

37

     left: 0; 

38	position: absolute;

39

}

40

-->

41

 </style> 

42	<!--[if IE]>

43

 <style> 

44

 .arrow { 

45	top: 100%;

46

}

47

 </style> 

48	<![endif]-->

49

 </head> 

50

51

 <body> 

52	<div id="container">

53	<h1> 个人标题 <span class="arrow"></span> </h1>

54

 </div> 

55

 </body> 

56

 </html> 

点此能够预览以上代码的运行结果，可能IE下的效果比较单调，再次鄙视IE。这里的关键技术是class="arrow"这个类，它产生了一个三角形状，让你看起来就像是一条带子被折叠了同样，控制这个类的CSS代码为：

01

 .arrow { 

02

     width: ; 

03

     height: ; 

04	line-height: ;

05	border-left: 20px solid transparent;

06	border-top: 10px solid #c8c8c8;

07	top: 104%;

08

     left: ; 

09	position: absolute;

10

}

这其中关键的属性是border-left 和 border-top，这两个属性造成了一个三角形效果，也就是带子的拐角效果，你能够将以上代码的五、6行，作以下更改，看看效果： html

1	border-right: 20px solid transparent;

2	border-top: 10px solid #c8c8c8;

再作一次更改，看看什么效果： web

1	border-left: 20px solid transparent;

2	border-bottom: 10px solid #c8c8c8;

经过这几回更改，你能够看到，border-right、border-left和border-bottom、border-top的不一样组合，能够实现三角形的不一样的朝向，你能够触类旁通制做你的折叠效果了。 spa