用 CSS 画三角形的教程_(附源文件下载)

      Ajax和CSS 2007-6-18 17:38

本例子把 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 )  压缩包下载


标签集:TAGS:CSS html
回复Comments() 点击Count()

回复Comments

{commenttime}{commentauthor}

{CommentUrl}
{commentcontent}