图片折叠效果CSS实现

来源：互联网发布：excel不同表格数据引用编辑：程序博客网时间：2024/04/29 22:05

觉得这个效果不错，就随便写了一下。
效果：http://output.jsbin.com/gerogawiqi/1
思路很简单，添加一个空伪元素，然后进行边框设置，实现折叠的效果。不过看起来还是很好看的。

css部分：

.tianzi{        width:300px;        height: 300px;        background: orange;        position: relative;        margin: 0 auto;    }    .tianzi:before{        content: " ";        position: absolute;        top: 0;        right: 0;        border-style: solid;        border-width:0 16px 16px 0;        border-color:#fff #fff #658E15 #658E15;        -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);    }

html部分：

<div class="tianzi"></div>

第二个效果
代码：

<!DOCTYPE html>  <html><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-linear-gradient(top, #e3e3e3, #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;/*    border-right: 20px solid transparent;border-top: 10px solid #c8c8c8;*//*border-left: 20px solid transparent;border-bottom: 10px solid #c8c8c8;*/    top: 104%;    left: 0;    position: absolute;}</style></head><body><div id="container">    <h1> 我的标题 <span class="arrow"></span> </h1></div></body></html>

这里的关键技术是class=”arrow”这个类，它产生了一个三角形状，让你看起来就像是一条带子被折叠了一样，控制这个类的CSS代码为：

.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行，做如下更改，看看效果对比三角尖的方向。

还涉及到css3background的渐变技术：
基本语法：
这里写图片描述

-webkit-linear-gradient(top,#ccc,#000);

1 0