CSS边角折叠实战

Ludou
人气: 1,717 我要评论( 14 ) 我要投稿

CSS边角形状效果

     在大量的网页设计作品中，都用到了这种折叠效果，通常用于标题背景。一般可以用PhotoShop来实现这样的效果，但是在当今广泛提倡减少网页图片使用量的情况下，我们还是少用图片为好。其实使用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
52
53
54
55
56
<!DOCTYPE html>  
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title>CSS Shapes</title>
<style type="text/css">
<!--
#container {
    background: #666;
    margin: auto;
    width: 500px;
    height: 700px;
    padding-top: 30px;
}
h1 {
    background: #e3e3e3;
    background: -moz-linear-gradient(top, #e3e3e3, #c8c8c8);
    background: -webkit-gradient(linear, left top, left bottom, from(#e3e3e3), to(#c8c8c8));
    padding: 10px 20px;
    margin-left: -20px;
    margin-top: 0;
    position: relative;
    width: 70%;
    -moz-box-shadow: 1px 1px 3px #292929;
    -webkit-box-shadow: 1px 1px 3px #292929;
    box-shadow: 1px 1px 3px #292929;
    color: #454545;
    text-shadow: 0 1px 0 white;
}
.arrow {
    width: 0;
    height: 0;
    line-height: 0;
    border-left: 20px solid transparent;
    border-top: 10px solid #c8c8c8;
    top: 104%;
    left: 0;
    position: absolute;
}
-->
</style>
<!--[if IE]>
<style>
.arrow {
    top: 100%;
}
</style>
<![endif]-->
</head>

<body>
<div id="container">
    <h1> 我的标题 <span class="arrow"></span> </h1>
</div>
</body>
</html>

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

1
2
3
4
5
6
7
8
9
10
.arrow {
    width: 0;
    height: 0;
    line-height: 0;
    border-left: 20px solid transparent;
    border-top: 10px solid #c8c8c8;
    top: 104%;
    left: 0;
    position: absolute;
}

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

1
2
border-right: 20px solid transparent;
border-top: 10px solid #c8c8c8;

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

1
2
border-left: 20px solid transparent;
border-bottom: 10px solid #c8c8c8;

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

     如果你喜欢通过PhotoShop来实现以上效果，可以看看这篇文章：

photoshop边角

参考文章：

订阅 分享 回复

本文版权归露兜博客所有，转载引用请完整注明以下信息：
本文作者：Ludou
本文标题：CSS边角折叠实战
本文地址：http://www.ludou.org/practical-css-shapes.html

Ludou

露兜博客博主，男生，业余Web程序员，儒家思想受益者。文采不佳，不喜欢聚光灯，不喜欢吹牛，不喜欢无序的做事方式。闲时喜欢写些代码自娱自乐，并在博客中分享一些个人技术经验。

标签: , ,

14 条评论

我来说两句
  1. 竹纤维加盟
    2010年5月31日 22:50

    真好看

    回复
  2. 老衲
    2010年6月1日 16:35

    不错

    回复
  3. 方法
    2010年6月2日 18:40

    真是高人阿，这个效果都能用css弄出来！

    回复
  4. 棺材中的尘埃
    2010年6月6日 16:38

    原来能用css实现？我一直是用ps直接做个折角的图！

    回复
    • Ludou
      2010年6月6日 17:56

      嗯。不过CSS方式对浏览器的依赖性很大，在Internet Explorer下显示效果很单调，还不如PS的效果，毕竟图片没有浏览器的兼容问题。

      回复
  5. frantic
    2010年7月16日 20:16

    支持一个，正好我的博客上widget显示过于四四方方，等会改一个去。

    回复
  6. 艾菲路之王
    2010年10月12日 20:42

    我感觉这个东西有点华而不实，还是用图片比较好吧

    回复
    • Ludou
      2010年10月12日 22:11

      既然这个华而不实，那么图片也同样是华而不实了。
      实现的都是同样的效果，我们要的是效果。不知道这东西还有什么内涵呢？

      回复
      • 青刀刀
        2010年11月3日 01:34

        其实当效果一样的情况下，就是比用css实现快还是图片实现起来快一点。
        当然还有就是用css熟练还是用ps熟练~~

        有幸，按照博主的代码写出来，还是有模有样的。
        但要是写在自己的网页中，位置大概又要推算半天。

        很不错，最少知道用边框的粗细来实现细节，很cool~
        可惜ie不支持背景渐变效果

        回复
  7. 青刀刀
    2010年11月3日 20:06

    我试着做了一个ps教程的那个，请多多指点。
    http://io.iocooo.com/?p=1042

    回复
  8. 布客空间
    2010年11月3日 22:27

    效果很不错哦哇！CSS真是个神奇的东西！

    回复
  9. 小付
    2010年11月25日 20:16

    我知道Css很强大，但没想到可以这么强大

    回复

发表评论

因博主长期在外地出差，您的留言可能暂时不会得到回复。

订阅评论