繁体中文
设为首页
加入收藏
资讯中心
网络编程
数据库
脚本专栏
实用技巧
软件编程
网页制作
操作系统
经典网摘
网站技巧
免费资源
关于我们
文章搜索
主机租用
域名查询
经验交流
基础教程
VML相关
页面导航：
首页
→
网络编程
→
CSS/HTML
→
经验交流
→ 正文内容
用DIV+CSS写小三角
发布：dxy 发布日期：
2007-1-29
字体：[
增加
减小
] 类型：转载
点击运行可以看到效果:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>test</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> /*test*/ *{ margin:0; padding:0; font-size:12px; font-family:Verdana, Arial; line-height:1.8; list-style:none;} #info,#nav{ margin:50px; border:1px dashed #f30; background:#ffc; padding:50px;} #info div{background:#f00; width:0px; height:0px; overflow:hidden; margin-bottom:10px;} /*测试*/ #com_a{ border-top:10px solid #ffc;border-left:10px solid #f30;border-bottom:10px solid #ffc;} #com_b{ border-top:10px solid #ffc;border-right:10px solid #f30;border-bottom:10px solid #ffc;} #com_c{ border-top:10px solid #ffc;border-right:10px solid #f30;border-bottom:10px solid #ffc;border-left:10px solid #f30;} #com_d{ border-top:10px solid #f30;border-right:10px solid #ffc;border-bottom:10px solid #f30;border-left:10px solid #ffc;} #com_e{ border-top:10px solid #ffc;border-left:10px solid #f30;} #com_f{ border-top:10px solid #f30;border-right:10px solid #ffc;border-left:10px solid #ffc;} #com_g{ border-right:10px solid #ffc;border-bottom:10px solid #f30;border-left:10px solid #ffc;} #com_h{ border-top:10px solid #f30;border-bottom:10px solid #f30;border-left:10px solid #ffc;} #com_i{ border-top:10px solid #f30;border-right:10px solid #f30;border-bottom:10px solid #f30;border-left:10px solid #ffc;} </style> </head> <body> <div id="info"> <h1>测试</h1> <div id="com_a"></div> <div id="com_b"></div> <div id="com_f"></div> <div id="com_g"></div> <div id="com_c"></div> <div id="com_d"></div> <div id="com_e"></div> <div id="com_h"></div> <div id="com_i"></div> </div> </body> </html>
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]
Tags：
用DIV+CSS写小三角
百度中搜索更多的关于
用DIV+CSS写小三角
内容，或者
用Google搜索相关更多
浏览次数：
载入中...
打印本文
关闭本文
返回首页
0
顶一下
上一篇文章：
HTML/XHTML模板
下一篇文章：
javascript横排竖排标准选项卡效果代码
文章评论
共有
位脚本之家网友发表了评论
我来说两句
同 类 文 章
解决 select 挡住div的解决方法
(X)HTML Strict 下的嵌套规则
2006.12.06更新 TopStyle剪辑库
用css alpha 滤镜 实现input file 样式美
区分IE6，IE7，firefox的CSS hack
绝对定位的DIV宽度自动适应的一个方法
用css实现的带阴影的表格效果的代码
IE 5.x/Win 和模型bug
CSS条件注释的使用详解教材
如何实现多风格选择 样式实时切换
最 近 更 新
div+css详解定位与定位应用
用css实现的带阴影的表格效果的代码
css实现行间距效果
css布局网页水平居中常用方法
CSS制造：鼠标移上去显示大图
针对浏览器隐藏CSS之独孤九剑
FF下 用 col 隐藏表格列的方法详解！
比较漂亮的一个导航条的效果DIV+CSS
Iframe自适应高度兼容ie,firefox多浏览器
为了防止乱码，请将用于页面编码的meta c
热 点 排 行
用CSS实现下拉菜单的多种方法
DIV+CSS布局教程大全与pdf电子书
非常漂亮的Div+CSS布局入门教程
让iframe自适应高度（支持xhtml）
在iframe中隐藏横向滚动条的方法
用css来控制图片大小显示的实现方
比较漂亮的一个导航条的效果DIV+
div做细线表格,很强悍
css强制换行 css强制不换行的css
让2个DIV居中并排显示
文章评论
共有 位脚本之家网友发表了评论我来说两句