软件开发培训班 >> 编程开发 >> CSS

用DIV+CSS写小三角

　　本文标签：用DIV+CSS写小三角

<!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>

技术文章快速查找

巧妙地使用CSS选择器

给图片加阴影效果的CSS

Firefox下样式设置宽度奇怪现象

css下margin、padding、border、background和font缩写示例

怎么改善现有网站

保存几个不错的css特效字

DIV CSS的XHTML代码结构浅谈

HTML DOM setInterval和clearInterval方法案例详解

相关下载

在线教程导航

软件应用
·Windows8	·Windows7	·Word
·Excel	·PPT	·WPS
Web开发
·ASP	·JavaScript	·DIV+CSS
·JSP	·VbScript	·XML
·PHP
开发语言
·VB	·VC	·ASP.NET
·Java	·C++	·Delphi
数据库开发
·MySQL	·MsSQL	·Access
·Oracle	·DB2
手机系统
·Android	·iOS	·WindowsPhone
网站设计
·Flash	·Dreamweaver	·Fireworks
平面设计
·Photoshop	·CorelDraw	·AutoCAD
·3DsMAX	·Illustrator
网络技术
·网站运营	·网络安全	·网络搭建