CSS边角折叠实战

日期: 标签:CSSWeb网页设计
如需帮忙改代码,或者WordPress二次开发、PHP网站建设等需求,可联系我购买付费服务:  点此联系我

CSS边角形状效果

在大量的网页设计作品中,都用到了这种折叠效果,通常用于标题背景。一般可以用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
露兜
kaapass@outlook.com  QQ 825533758

业余编程爱好者。

19 条留言

点此留言
  1. 竹纤维加盟 竹纤维加盟

    真好看

  2. 老衲 老衲

    不错

  3. 方法 方法

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

  4. 棺材中的尘埃 棺材中的尘埃

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

    • Ludou

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

  5. frantic frantic

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

  6. 艾菲路之王

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

    • Ludou

      @艾菲路之王 既然这个华而不实,那么图片也同样是华而不实了。
      实现的都是同样的效果,我们要的是效果。不知道这东西还有什么内涵呢?

      • 青刀刀 青刀刀

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

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

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

  7. 青刀刀 青刀刀

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

    • Ludou

      @青刀刀 效果不错,学习能力很强啊。

      其实你的代码可以保存到我的代码编辑器上的,而不用你自己新建一个test.html,同样可以看到演示效果:
      https://www.ludou.org/web-code-editor.html

      • 青刀刀 青刀刀

        @Ludou 不错不错,你做的这个才是高手水准,我已经保存了。
        以后做啥试验就用你这个,还节省我的空间啦。哈

        http://ludou.org/4

  8. 布客空间 布客空间

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

  9. 小付 小付

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

  10. Him

    看完这篇文章我已经开始着手折腾了,你的博客虽然不华丽,但是内容很有营养,谢谢露兜!

  11. 李一佳

    兜哥你好,建议你在你的网站加一个复制代码的按钮,这样比较酷!就好比这个网站:http://www.jb51.net/article/32628.htm ,我也想在我的网站上面这样弄,那我想请教一下兜哥,这种效果是怎么做到的?

  12. Aaron Aaron

    看上去很漂亮。

发表留言