CSS边角折叠效果-优快云博客

2019独角兽企业重金招聘Python工程师标准>>>

CSS边角折叠实战

在大量的网页设计作品中，都用到了这种折叠效果，通常用于标题背景。一般可以用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}

     15h1 {

     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行，做如下更改，看看效果：

 
      1border-right: 20px solid transparent;

      2border-top: 10px solid #c8c8c8;

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

 
      1border-left: 20px solid transparent;

      2border-bottom: 10px solid #c8c8c8;

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

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

带有橙色标题的内容区，效果如下图

转载于:https://my.oschina.net/glelaine/blog/32907