css实现小三角样式
这次在开发中，想用图标小三角来说明功能，可是又不想使用图片，就在网上找了不少的文章，结果发现下面这段代码是可行的，发出来，仅供大家参考：
<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 的两边是斜的但没想到可以这样来做尖角箭头，太厉害了。
效果图，可以参考附件图片
相关推荐
yaodilu 2020-05-10
Ladyseven 2020-07-25
pigsmall 2020-11-19
SXIAOYI 2020-09-16
whileinsist 2020-06-24
gufudhn 2020-06-12
冰蝶 2020-06-05
LinuxAndroidAI 2020-06-04
supperme 2020-05-28
e度空间 2020-04-27
云端漂移 2020-04-09
peterwzc 2020-03-17
有心就有方向 2012-09-03
ebuild 2013-05-14
donghedonghe 2013-05-31
tdeclipse 2011-02-28
linuxprobe0 2013-04-15
linuxprobe0 2013-04-01