这次在开发中，想用图标小三角来说明功能，可是又不想使用图片，就在网上找了不少的文章，结果发现下面这段代码是可行的，发出来，仅供大家参考：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>请选择身份入口</title>
<style type="text/css">
.area {
margin:100px auto;
width:300px;
height: 150px;
}
.item {
float:left; clear:both;
margin-bottom:23px;
}
/* 向上的箭头 */
.dot-top {
font-size: 0;
line-height: 0;
border-width: 10px;
border-color: red;
border-top-width: 0;
border-style: dashed;
border-bottom-style: solid;
border-left-color: transparent;
border-right-color: transparent;
}
/* 向右的箭头 */
.dot-right {
font-size: 0;
line-height: 0;
border-width: 10px;
border-color: red;
border-right-width: 0;
border-style: dashed;
border-left-style: solid;
border-top-color: transparent;
border-bottom-color: transparent;
}
/* 向下的箭头 */
.dot-bottom {
font-size: 0;
line-height: 0;
border-width: 10px;
border-color: red;
border-bottom-width: 0;
border-style: dashed;
border-top-style: solid;
border-left-color: transparent;
border-right-color: transparent;
}
/* 向左的箭头 */
.dot-left {
font-size: 0;
line-height: 0;
border-width: 10px;
border-color: red;
border-left-width: 0;
border-style: dashed;
border-right-style: solid;
border-top-color: transparent;
border-bottom-color: transparent;
}
</style>
</head>
<body>
<div class="area">
<span class="item dot-top"></span>
<span class="item dot-right"></span>
<span class="item dot-bottom"></span>
<span class="item dot-left"></span>
</div>
</body>
</html>
四个方向的三角形图标都有了。
可以通过设置 border-width 来调整箭头的大小，这样就不需要每次都去做图了，非常方便，颜色可以随时调整，真佩服那位大神，以前虽然也发现 border 的两边是斜的但没想到可以这样来做尖角箭头，太厉害了。
效果图，可以参考附件图片
相关推荐
在网页设计中，CSS（Cascading Style Sheets）是一种用于控制网页元素呈现样式的语言。在CSS中，通过巧妙地利用边框、内边距和背景等属性，我们可以创建出各种几何形状，其中包括三角形。本篇文章将深入探讨如何用...
其中，利用CSS实现小三角形是一种常见的技巧，尤其在创建箭头、提示框等元素时非常实用。这个“css小三角的做法与使用”主题深入探讨了如何仅通过CSS来创建各种形状的三角形，并且提供了文本文档和图解以帮助学习者...
在网页设计中，CSS（Cascading Style Sheets）是一种强大的样式表语言，用于定义HTML或XML（包括如SVG、MathML等各种XML方言）文档的呈现。这个“css实现三角形.zip”压缩包文件包含了如何利用CSS来创建不同方向的...
在CSS世界中，三角形样式是一种常见的视觉效果，用于创建箭头、指示器或装饰元素。这个主题主要涉及如何利用CSS的基本属性和技巧来构造出看似复杂的几何形状，特别是三角形。下面我们将深入探讨CSS创建三角形的原理...
其中，使用CSS实现小三角形效果是一个常见的需求，它可以在网页中制作出整洁的视觉效果，比如下拉菜单的小箭头、提示信息的小尾巴等。在本篇内容中，将详细介绍如何利用CSS实现小三角形效果，并提供实例代码。 首先...
在CSS世界中，创造出各种形状是一项基本技能，而“用CSS写出三角形”是一...理解边框塌陷和伪元素的使用，可以帮助开发者更好地利用CSS实现设计目标。通过实践和实验，你可以掌握更多关于如何用CSS绘制复杂形状的技巧。
这个压缩包“纯CSS3实现倒三角统计图 纯CSS3实现倒三角统计图网页特效.zip”提供了使用纯CSS3来创建这种图形的方法，无需依赖JavaScript库如jQuery或HTML5特定特性。这使得实现更轻量级、更快速，并且更容易维护。 ...
本主题聚焦于一种常见的网页设计元素——"纯CSS流程步骤箭头样式"，这是一种高效、优雅地呈现序列或流程的方法，无需依赖图像或JavaScript，完全由CSS实现。 首先，"纯CSS"意味着我们仅通过CSS（层叠样式表）来控制...
在前端开发中，CSS（Cascading Style Sheets）是一种用于定义网页元素样式的重要技术。它不仅可以控制元素的颜色、字体、布局等，还可以创造出各种复杂的图形，其中之一就是三角形。本教程将详细介绍如何仅使用CSS来...
CSS（层叠样式表）是一种用于网页设计中描述视觉表现的语言。通过CSS，我们不仅可以定义文本、颜色、边距、布局等，还可以创建各种形状，包括圆角三角形。在本例中，将分享如何使用CSS实现带圆角的三角形，并提供...
"纯css三角提示框"是一种完全使用CSS实现的提示框，它不依赖JavaScript，但可以实现动态效果，如自动定位和自定义弹出方向。这种技术在优化页面性能和减少代码复杂性方面具有优势，因为CSS比JavaScript更轻量级，且...
CSS3（层叠样式表第三版）提供了丰富的样式和定位功能，使得实现网页悬浮窗变得相对简单。本文将详细介绍如何使用CSS3来创建一个网页悬浮窗，并探讨相关知识点。 首先，我们需要理解CSS3中的定位属性。在CSS3中，有...
这些设计元素可以通过修改边框、背景色、字体样式等CSS属性实现。 6. **自定义指示器** 除了传统的下划线或填充颜色作为选中状态的指示，还可以创新地使用箭头、图标或者滑块作为选中状态的视觉反馈。 7. **交互...
标题中的“CSS学习 三角 border transparent 下拉框”是指在CSS样式设计中，如何利用边框(border)的透明属性创建三角形以及在下拉框(drop-down list)中应用这一技巧。在网页设计中，三角形通常用于指示箭头或方向，...
这就是实现小三角形的核心原理。 在给出的示例代码中： ```css ; border-left:10px solid #FF3300; border-bottom:10px solid #FFFFCC;"> ``` 这段CSS设置了元素的上、左、下边框，而没有设置右边框。这里的...
在本篇文档中，所讲述的是如何利用JavaScript（JS）和CSS来实现一个具有小三角指引的滑动门效果。滑动门是一种常见的网页交互效果，它通过鼠标悬停或点击来展示或隐藏页面内容。添加小三角指引，可以使用户的视觉...
本文将详细介绍如何利用CSS创建一个简单而实用的交互小三角箭头图标。这个图标不仅可以作为链接或按钮的一部分，还可以用于界面中的信息提示和方向指引。 要创建一个CSS三角形，我们需要使用边框属性（border）。...