三角形图标的DIV+CSS做法

最新推荐文章于 2022-07-12 17:59:58 发布

iteye_12978

最新推荐文章于 2022-07-12 17:59:58 发布

阅读量116

点赞数

分类专栏： Div+Css 文章标签： CSS XHTML HTML 浏览器 C

本文链接：https://blog.csdn.net/iteye_12978/article/details/81692597

版权

Div+Css 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

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

代码如下:

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

</style>
</head>
<body>

</body>
</html>

显示：

iteye_12978

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
三角形图标的DIV+CSS做法

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

扫一扫

专栏目录