`
mrstanglu
  • 浏览: 41192 次
  • 性别: 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>

显示：

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

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

相关推荐

    用DIV+CSS写小三角

    ### 使用DIV+CSS创建小三角形 #### 一、引言 在网页设计与开发过程中，经常需要用到一些小图标或装饰元素来美化页面布局。其中，利用CSS样式创建各种形状的小三角形是一种常见且实用的技术手段。通过巧妙地设置...

    CSS中三角图标制作方法

    第一种方法通过巧妙地利用HTML中的嵌套元素以及CSS的定位和溢出属性来创建一个三角形图标。具体步骤如下： 1. **HTML结构**： ```html &lt;i&gt;&lt;s&gt;◇&lt;/s&gt;&lt;/i&gt; ``` 2. **CSS样式**： - **公共样式**： ```css s, i...

    纯CSS制作各种各样的网页图标（三角形、暂停按钮、下载箭头、加号等）

    三角形 &lt;div class=box&gt;&lt;/div&gt; &lt;style&gt; .box{ width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 50px solid transparent; border-...

    CSS制作箭头图标代码(圆，三角形，椭圆)

    最后，我们来讨论如何用CSS代码来创建三角形图标。三角形的创建类似于制作箭头图标。在`border`属性中，只需要给定三个边框的透明度，并设置一个边框的颜色和宽度。例如，设置一个`div`元素的`border-left`、`border...

    css+html绘制6边型及蜂巢效果

    接下来，我们用CSS来塑造这个div为六边形。关键在于利用伪元素`::before`和`::after`创建三角形，然后将它们与基础div结合。以下是CSS代码示例： ```css .hexagon { width: 100px; height: 57.74px; /* (3 * ...

    CSS技巧之圆角背景与三角形实现方法

    ### CSS技巧之圆角背景与三角形实现方法 在前端开发过程中，经常需要用到一些小巧而实用的技巧来提升用户体验和页面美观度。其中，“CSS三角形”与“圆角背景”的实现是两种非常典型且实用的技术。这两种方法不仅...

    实现棱形的CSS样式

    接下来，我们为这个`&lt;div&gt;`添加CSS样式： ```css .diamond { width: 0; height: 0; border-left: 50px solid transparent; /* 控制左侧边界的透明度以调整宽度 */ border-right: 50px solid transparent; /* ...

    3.5CSS 内容总结(五)高级技巧.md

    以上介绍了CSS中的一些高级技巧，包括精灵图、字体图标、CSS三角形、用户界面样式、`vertical-align`属性的应用以及如何处理文本溢出的情况。这些技巧不仅可以帮助开发者提高网站性能，还能优化用户体验。

    CSS+JS实现仿微信图片信息展示

    在CSS中，可以利用伪元素`::before`和`::after`来创建三角形。通过设置元素的`border`属性并隐藏不需要的部分，我们可以形成一个尖角。例如： ```css .wechat-image-container { position: relative; } .corner {...

    css3爱心点赞图标动画特效

    在本文中，我们将深入探讨如何使用CSS3来创建一个引人注目的爱心点赞图标动画特效。这个特效结合了HTML5和CSS3的技术，为用户提供了一个交互式的圆形爱心按钮，当用户点击图标时，爱心会逐渐加载并点亮，呈现出动态...

    CSS中三角形的绘制与巧妙应用实例详解

    网页中常见的一些三角形，无需制作成图片或者字体图标，使用CSS就可以直接画出来。如小米官网中： 以及京东网页中的： 那么这些三角通过是CSS怎么实现的呢？ 三角的实现 我们可以通过将一个div容器的宽和高都设置...

    css的树形菜单可以自动展开

    这里我们使用Unicode字符`"\25B6"`（三角形箭头）作为展开/折叠的图标： ```css .tree &gt; li::before { content: "\25B6"; /* 展开图标 */ float: left; /* 让图标位于文本左侧 */ margin-right: 5px; /* 与文本...

    css-flags:仅在一个DIV中使用CSS渲染的世界标志

    在本文中，我们将深入探讨如何使用CSS来在单一的HTML `&lt;div&gt;` 元素中渲染世界各国的国旗。这个项目被称为 "css-flags"，它的灵感来源于Lynn Fisher的工作。CSS标志是一种利用CSS的力量，通过纯样式代码来创建图形，...

    收集的一些树菜单-js-div

    通过CSS，我们可以定制div的样式，使其看起来像传统的树形结构，如使用三角形图标表示展开/折叠状态，通过缩进表示层级关系。 构建树菜单的步骤通常包括以下几点： 1. 创建HTML结构：首先，你需要用div元素创建树...

    使用css实现全兼容tooltip提示框

    2. 使用三角形图标：将三角形图标作为div盒子的子元素，使用position: absolute;属性将其定位到适当的位置。通过调整bottom和right属性，可以控制三角形图标的绝对位置。 3. 设置样式：给div盒子添加背景色、边框...

    CSS初级学习手册.pdf

    CSS三角用于创建三角形图形，用户界面样式用于改善用户体验。 - CSS三角：通过边框的宽度设置形成三角形。 - 用户界面样式：包括鼠标样式、表单控件的外观等。 15. vertical-align属性和文字溢出省略号效果 这些...

    CSS3 SVG消息提示框样式特效

    在创建带关闭按钮的消息提示框时，我们可以使用SVG来绘制提示框的形状，如矩形、三角形（用于箭头），甚至自定义的关闭图标。CSS3则用于定义这些元素的样式，如颜色、边框、阴影、过渡效果等。同时，我们可以使用CSS...

    纯CSS实现的小三角

    在Web前端开发过程中，经常需要使用一些小图标来提升用户体验或者辅助界面设计，其中最基础的就是使用CSS来制作各种形状，如圆形、正方形等。而在这些基本形状的基础上，通过巧妙地利用CSS的特性，可以进一步创建出...

    CSS中灵活使用:before和:after

    在这个示例中，`:before` 伪元素创建了一个位于 `.test-div` 元素上方的三角形，增强了对话框的视觉效果。 `:before` 和 `:after` 的应用不仅仅局限于创建对话框，它们还可以用于创建各种装饰性元素，如图标、分隔...

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