CSS边角折叠实战
如需帮忙改代码，或者WordPress二次开发、PHP网站建设等需求，可联系我购买付费服务： 点此联系我
在大量的网页设计作品中，都用到了这种折叠效果，通常用于标题背景。一般可以用PhotoShop来实现这样的效果，但是在当今广泛提倡减少网页图片使用量的情况下，我们还是少用图片为好。其实使用CSS是可以很容易地实现这种效果的，废话少说，直接上代码：
<!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代码为：
.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行，做如下更改，看看效果：
border-right: 20px solid transparent;
border-top: 10px solid #c8c8c8;再做一次更改，看看什么效果：
border-left: 20px solid transparent;
border-bottom: 10px solid #c8c8c8;通过这几次更改，你可以看到，border-right、border-left和border-bottom、border-top的不同组合，可以实现三角形的不同的朝向，你可以举一反三制作你的折叠效果了。
参考文章：
-- 完 --
本文采用 「CC BY-NC-SA 4.0」创作共享协议，转载请标注以下信息：
原文出处：露兜即刻 https://www.ludou.org/practical-css-shapes.html
真好看
不错
真是高人阿，这个效果都能用css弄出来！
原来能用css实现？我一直是用ps直接做个折角的图！
@棺材中的尘埃 嗯。不过CSS方式对浏览器的依赖性很大，在Internet Explorer下显示效果很单调，还不如PS的效果，毕竟图片没有浏览器的兼容问题。
支持一个，正好我的博客上widget显示过于四四方方，等会改一个去。
我感觉这个东西有点华而不实，还是用图片比较好吧
@艾菲路之王 既然这个华而不实，那么图片也同样是华而不实了。
实现的都是同样的效果，我们要的是效果。不知道这东西还有什么内涵呢？
@Ludou 其实当效果一样的情况下，就是比用css实现快还是图片实现起来快一点。
当然还有就是用css熟练还是用ps熟练~~
有幸，按照博主的代码写出来，还是有模有样的。
但要是写在自己的网页中，位置大概又要推算半天。
很不错，最少知道用边框的粗细来实现细节，很cool~
可惜ie不支持背景渐变效果
我试着做了一个ps教程的那个，请多多指点。
http://io.iocooo.com/?p=1042
@青刀刀 效果不错，学习能力很强啊。
其实你的代码可以保存到我的代码编辑器上的，而不用你自己新建一个test.html，同样可以看到演示效果：
https://www.ludou.org/web-code-editor.html
@Ludou 不错不错，你做的这个才是高手水准，我已经保存了。
以后做啥试验就用你这个，还节省我的空间啦。哈
http://ludou.org/4
效果很不错哦哇！CSS真是个神奇的东西！
我知道Css很强大，但没想到可以这么强大
看完这篇文章我已经开始着手折腾了，你的博客虽然不华丽，但是内容很有营养，谢谢露兜！
@Him 嗯，不客气。
兜哥你好，建议你在你的网站加一个复制代码的按钮，这样比较酷！就好比这个网站：http://www.jb51.net/article/32628.htm ，我也想在我的网站上面这样弄，那我想请教一下兜哥，这种效果是怎么做到的？
@李一佳 插件：SyntaxHighlighter Evolved
看上去很漂亮。