图片折叠效果CSS实现

最新推荐文章于 2024-09-04 07:11:11 发布

u011263845

最新推荐文章于 2024-09-04 07:11:11 发布

阅读量3.4k

点赞数 1

分类专栏： html5&&css3 文章标签： css折叠折叠效果 css

本文链接：https://blog.csdn.net/u011263845/article/details/45622819

版权

html5&&css3 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

觉得这个效果不错，就随便写了一下。
效果：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;
}