DIV+CSS 小三角的做法与使用

傷城~ 2021-12-17 16:21 217阅读 0赞

用DIV+CSS可以作出很多不同形状的角形；以下我只写了几个；CSS没有优化；是为了让大家看得更清一些；  
  
以下是一些小三角的形状：  
  
![e200610180310.gif][]  
  
这是第一个小三角的写法：

![news_bullet.gif][] 程序代码

\#com\_a\{ border-top:10px solid \#FFFFCC;border-left:10px solid \#FF3300;border-bottom:10px solid \#FFFFCC;\}

以下是一些小三角；可以举一反三；做出更多的；  
![news_bullet.gif][] HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd][http_www.w3.org_TR_xhtml1_DTD_xhtml1-transitional.dtd]">  
<html xmlns="[http://www.w3.org/1999/xhtml][http_www.w3.org_1999_xhtml]">  
<head>  
<title>www.zishu.cn</title>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<style>  
/\*zishu.cn\*/  
\*\{ 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 \#FF3300; background:\#FFFFCC; padding:50px;\}  
\#info div\{background:\#FF0000; width:0px; height:0px; overflow:hidden; margin-bottom:10px;\}  
/\*一些三角的写法\*/  
\#com\_a\{ border-top:10px solid \#FFFFCC;border-left:10px solid \#FFFFCC;border-bottom:10px solid \#FF3300;\}  
\#com\_b\{ border-top:10px solid \#FFFFCC;border-right:10px solid \#FF3300;border-bottom:10px solid \#FFFFCC;\}  
\#com\_c\{ border-top:10px solid \#FFFFCC;border-right:10px solid \#FF3300;border-bottom:10px solid \#FFFFCC;border-left:10px solid \#FF3300;\}  
\#com\_d\{ border-top:10px solid \#FF3300;border-right:10px solid \#FFFFCC;border-bottom:10px solid \#FF3300;border-left:10px solid \#FFFFCC;\}  
\#com\_e\{ border-top:10px solid \#FFFFCC;border-left:10px solid \#FF3300;\}  
\#com\_f\{ border-top:10px solid \#FF3300;border-right:10px solid \#FFFFCC;border-left:10px solid \#FFFFCC;\}  
\#com\_g\{ border-right:10px solid \#FFFFCC;border-bottom:10px solid \#FF3300;border-left:10px solid \#FFFFCC;\}  
\#com\_h\{ border-top:10px solid \#FF3300;border-bottom:10px solid \#FF3300;border-left:10px solid \#FFFFCC;\}  
\#com\_i\{ border-top:10px solid \#FF3300;border-right:10px solid \#FF3300;border-bottom:10px solid \#FF3300;border-left:10px solid \#FFFFCC;\}  
</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>

TraceBack:  [http://www.zishu.cn/blogview.asp?logID=514&cateID=3][http_www.zishu.cn_blogview.asp_logID_514_cateID_3]

转载于:https://www.cnblogs.com/hdjjun/archive/2008/06/17/1223727.html

[e200610180310.gif]: http://www.zishu.cn/attachments/month_0610/e200610180310.gif
[news_bullet.gif]: http://www.zishu.cn/images/news_bullet.gif
[http_www.w3.org_TR_xhtml1_DTD_xhtml1-transitional.dtd]: http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
[http_www.w3.org_1999_xhtml]: http://www.w3.org/1999/xhtml
[http_www.zishu.cn_blogview.asp_logID_514_cateID_3]: http://www.zishu.cn/blogview.asp?logID=514&cateID=3