`
mrstanglu
  • 浏览: 39778 次
  • 性别: Icon_minigender_2
  • 来自: 郑州
社区版块
存档分类
最新评论

三角形图标的DIV+CSS做法

CSSXHTMLHTML浏览器C 
阅读更多

以前做三角形图标,都是做一个三角的图片,然后在css里面调用,后来发现有另一种特殊的做法.用em标签方法来实现（其他标签也一样可以实现）.em在html里面是一个强调语气,和strong标签类似,传统上浏览器会以斜体来显示em，以粗体来显示strong。
现在要以特殊的em手法来实现三角形图标的做法,以下图为例:

 

 

代码如下:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>三角形图标的特殊做法</title>
<style type="text/css">
<!--
* { font-size:12px}
ul li { list-style:none; margin:0; padding:0}
li { height:25px}
em { display:block; font:0/0 "宋体"; border:4px solid; border-color:#fff #fff #fff #921902; float:left; margin-top:2px}
-->
</style>
</head>

<body>
<ul>
   <li><em></em>这是一个带三角的新闻列表</li>
   <li><em></em>这是一个带三角的新闻列表</li>
   <li><em></em>这是一个带三角的新闻列表</li>
   <li><em></em>这是一个带三角的新闻列表</li>
   <li><em></em>这是一个带三角的新闻列表</li>
</ul>
</body>
</html>

解释:

css中
em { display:block; font:0/0 "宋体"; border:4px solid; border-color:#fff #fff #fff #921902; float:left; margin-top:2px}

font:0/0 是分别定义字体大小为0和行高为0。font:fontsize/line-height

border:4px solid 可以分别改成5px和6px来改变三角图标的大小,border-color:#fff #fff #fff #921902 改变颜色顺序来改变三角图标的方向(为顺时针方向),可以自己试一试.

可能很多人和我当初一样,还是不大了解.现在在用一个示例来解释一下：

代码：

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>三角形图标的特殊做法</title>
<style type="text/css">
<!--
* { font-size:12px}
.a {font:0/0 "宋体"; border:25px solid; border-color:red blue #000 green; float:left; margin:0 15px}
.b {font:0/0 "宋体"; border:25px solid; border-color:#fff #fff #000 #fff; float:left; margin:0 15px}
.c {font:0/0 "宋体"; border:25px solid; border-color:#fff blue #fff #fff; float:left; margin:0 15px}
.d {font:0/0 "宋体"; border:25px solid; border-color:#fff #fff #fff green; float:left; margin:0 15px}
-->
</style>
</head>
<body>

<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>

</body>
</html>

显示：

分享到：
| 好东西
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics