CSS边角折叠实战-白红宇

CSS边角折叠实战

阅读量：5741 次

发布时间：2019-06-18

本文共 1975 字，大约阅读时间需要 6 分钟。

在大量的网页设计作品中，都用到了这种折叠效果，通常用于标题背景。一般可以用PhotoShop来实现这样的效果，但是在当今广泛提倡减少网页图片使用量的情况下，我们还是少用图片为好。其实使用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，这两个属性形成了一个三角形效果，也就是带子的拐角效果，你可以将以上代码的5、6行，做如下更改，看看效果：

1	border-right: 20px solid transparent;

2	border-top: 10px solid #c8c8c8;

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

1	border-left: 20px solid transparent;

2	border-bottom: 10px solid #c8c8c8;

通过这几次更改，你可以看到，border-right、border-left和border-bottom、border-top的不同组合，可以实现三角形的不同的朝向，你可以举一反三制作你的折叠效果了。

转载于:https://my.oschina.net/u/1401419/blog/181251

你可能感兴趣的文章

我的友情链接

查看>>

Windows Phone 7 隔离存储空间资源管理器

查看>>

Microsoft Excel 2000/2003修复工具

查看>>

apache安装报错undefined reference ssl

查看>>

关于爱情只有一句忠告

查看>>

CentOS 7下安装部署Oracle11g图文教程

查看>>

F#初学笔记06

查看>>

实战：将企业域名解析委派给企业DNS服务器

查看>>

在Lync 2013环境部署Office Web Apps

Master带给世界的思考：是“失控”还是进化

查看>>

用户和开发者不满苹果iCloud问题多多

查看>>

attrs.xml中declare-styleable 详解（用于自定义控件的属性）

查看>>

java.lang.UnsatisfiedLinkError：no dll in java.library.path终极解决之道

查看>>

错误“Unexpected namespace prefix "xmlns" found for tag LinearLayout”的解决方法(转)

【跃迁之路】【460天】程序员高效学习方法论探索系列（实验阶段217-2018.05.11）...

查看>>

C++入门读物推荐

查看>>