用DIV+CSS写小三角

更新时间：2007年01月29日 00:00:00 作者：

<!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 全选注:引入外部Js需再刷新一下页面才能执行]

用DIV+CSS写小三角

img标签中alt和title属性的正确使用
2008-01-01
Div CSS absolute与relative的区别小结
Div + CSS 进行网页布局，适当地运用 absolute 与 relative，能给布局带来意想不到的效果和方便，达到事半功倍…本文介绍了关于 absolute 与 relative 的运用。
2007-12-12
阿里前端开发中的规范要求
web前端开发中，适当的规范和标准绝不是消灭代码内容的创造性、优雅性,而是限制过度个性化，以一种普遍认可的统一方式,提升协作效率,降低沟通成本。规范的目的是为了编写高质量的代码。
2022-12-12
让IE ff Opera同时支持Alpha透明的方法
图片的透明效果是网页中需要用到的一种特殊形式，虽然不是非常的常用，但是遇到这样的需求往往有点措手不及。
2008-09-09
网页设计者需要了解的_网页字体大小数据参考
对于页面来说，字体的大小设置是比较重要的，网上搜集了一些关于网页中字体大小的数据对比，在这共享出来给大家一起看看，希望对大家在页面制作过程中有所帮助！
2008-10-10
firefox下rowspan+border+border-collapse的bug
好久没有发相关浏览器的坑了。今天同事cy发现，在firefox里rowspan不生效...
2010-02-02
iframe 的用法与注意事项
本文主要来讲述一下 iframe 的用法与注意事项: 好多同志对 iframe 是如何控制的,并不是十分了解,基本上还处于一个模糊的认识状态. 注意两个事项,ifr 是一个以存在的 iframe 的 ID 和 NAME 值:
2008-04-04
CSS样式表常用小技巧收藏
CSS样式表常用小技巧收藏...
2007-03-03
固定右栏宽度, 左栏内容先出现同时自适应宽度的布局
固定右栏宽度, 左栏内容先出现同时自适应宽度的布局...
2007-01-01
css利用A标签的背景可能作出很有意思的效果
css利用A标签的背景可能作出很有意思的效果...
2007-12-12

用DIV+CSS写小三角

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具