本例子把 CSS 样式和 Html 混在一起了, 实际做网页不推荐这样 作者: www.Y-boy.cn
只看 <body> 部分的, 代码如下:
-----------------------------------------------------------------------------------------
<!-- 下面定义 body 的宽为 10 像素, 因为下面将会定义每个 div 边框的宽度为 5 像素, 左右加起来就有 10 像素了. -->
<body style="width:10px;">
出处: www.RiaHome.cn
<!-- 第一个应用: 一个简单的三角形 -->
<!-- 定义这个 div 的上右下边框的样式分别都是: 宽度为 5 像素, 线条为 solid(实线), 颜色为 #FFFFFF(白色,这里一定要和背景色相同,不一定都要白色,只因为现在body的背景为白色); 只有它的左边框是黑色, 这就是三角形的颜色了 -->
<div style="border-left:5px solid #000000; border-top:5px solid #FFFFFF; border-right:5px solid #FFFFFF; border-bottom:5px solid #FFFFFF;"></div>
<br />
<!-- 第二个应用:两个对等的三角形 -->
<!-- 定义这个 div 的上下边框样式: 宽度为 5 像素, 线条为 solid(实线), 颜色为 #FFFFFF(白色,这里一定要和背景色相同,不一定都要白色,只因为现在body的背景为白色); 定义这个 div 的左右边框样式: 宽度为 5 像素, 线条为 solid(实线), 颜色为 #000000(黑色,这就决定三角形的颜色了) -->
<div style="border-left:5px solid #000000; border-top:5px solid #FFFFFF; border-right:5px solid #000000; border-bottom:5px solid #FFFFFF;"></div>
<!-- 其原理就是: div 的边框与边框之间的衔接方式是斜角衔接的(不全都是 div 标签才有这性质).还有很多可能的应用的,自己可以研究下... -->
</body>
-----------------------------------------------------------------------------------------
运行效果:
源文件( html ) 压缩包下载
