这次在开发中，想用图标小三角来说明功能，可是又不想使用图片，就在网上找了不少的文章，结果发现下面这段代码是可行的，发出来，仅供大家参考：
<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 三角形样式,样式表,css样式,三角形样式,css三角
在众多的网页效果中，都有小三角形效果的应用，能够增加特定应用的美观度，下面就给出一段实例代码，里面介绍了两种实现小三角头效果的方式。代码如下： CSS Code复制内容到剪贴板 <!DOCTYPE html> <...
非常好看而且容易使用的css tab选项卡
今天我教大家如何用css设计对话框的尖角效果。 对话框的结构： 1，左边的矩形和右边的三角形。 第一步，实现右边的三角形》 div{ display:block; width:0px; height:0px; border-top:25px solid blue; border...
以上的效果完全是用 css 来实现的，那么是怎么实现的呢？ 我们知道 html 中有一些特殊的字符，具体的请点击 HTML特殊字符大全。 通过特殊字符，利用 css 中的 margin 或者 position 方法完全可以实现以上效果。 ...
主要介绍了JS+CSS实现带小三角指引的滑动门效果,可实现带有箭头提示效果的滑动门功能,涉及JavaScript动态操作页面元素样式的相关技巧,需要的朋友可以参考下
CSS3 SVG三角形不断放大特效是一款css3 animation基于svg绘制旋转放大的透明三角形动画特效。
我先说如何制作三角形吧，相信大家在平时逛网站的时候都会看到一些导航栏中的三角形吧，比如说： 网易首页的头部菜单栏中，也会有这样的三角形 当鼠标经过时，三角形会垂直翻转，如下 现在我分享制作三角形的...
效果描述： 最近网上看到一个前端面试题，要求面试者用纯CSS实现一个6边形的效果 乍一看有点乱，但是仔细分析下，其实... 1、将style.css中的样式拷贝到你的网页中 2、将body中的代码部分拷贝到你需要的地方即可
首先要了解border具体是怎么样的，我写了一个这样的样式：border:50px solid #000; border-color:#f00 #000 #f0f #00f;在FF下面显示效果如下：出现4个三角形合并成一个正方形。到这里就很清晰了，只要把想要的保留，...
三角形面板样式三角形面板样式三角形面板样式css三角形面板样式
气泡提示框牵扯到的技术有：JS响应鼠标的事件、纯CSS制作三角形，附截图及示例代码，感兴趣的朋友可以参考下
带背景颜色的小三角实现是比较简单的！ <span id=top></span> </div> css #top { position: absolute; width: 0px; height: 0px; line-height: 0px;/*为了防止ie下出现题型*/ border-bottom: 10px solid #8
本文通过实例代码给大家介绍了用CSS样式写选择框右侧小三角的方法，需要的朋友参考下吧
CSS伪元素非常有用，它提供了一种无需多余的DOM元素来实现一些常见的功能的方法，以下利用其实现一个带三角形的tooltip。 下面是DOM结构：下面是对应的CSS样式： XML/HTML Code复制内容到剪贴板 bottom> ...
2、利用较宽的border实现√号的背景效果 3、利用透明border去掉多余背景色。 4、利用子绝父相定位，将√号定位到合适位置。 css代码： &.selected{ color: @theme; border: 0.02rem solid @theme; position: ...
之前写的三角形一直在同一个颜色，没有边框的样式。如下： CSS代码如下： .tri-up{width: 0;height:0;border-left:20px solid transparent;border-right: 20px solid transparent;border-bottom: 20px solid red; ...
今天我们介绍几种，用css实现左上朝向三角形（Top-Left Triangle）的写法。 示意图（以宽高各60px为例）： 这种三角形，一般可以用来做“对话框”类型图形的左下小脚。 第一种： #triangle-topleft { border: 30...
本文介绍的是利用纯CSS的带箭头流程进度条，兼容到IE8，需要的朋友们下面来一起学习学习。 首先写出一个基本的样式。 .cssNav li{ padding: 0px 20px; line-height: 40px; background: #50abe4; display: ...
1. 思路 怎么用CSS画一个带阴影的三角形呢 ? 有童鞋说, 这还不简单吗 网上有很多解决方案, 但其实大多都是实现不太完美的, 存在一些问题 假设我们做一个向下的三角形箭头 常见的方法大致有两种 ...css样式 .bo