当前位置：首页 » 编程语言 » html中的箭头

html中的箭头

发布时间: 2021-03-31 08:06:27

A. html中一根线带箭头,箭头在中间且指向下方怎么做

1、切图。
2、字体文件。
3、css画。

B. html中这种箭头怎么实现

除了图标（图片、bootstrap fontawesome字体）之外，还通过CSS的border属性设置可以实现箭头效果。

HTML结构：

<divclass="item-num-wrap">
<spanclass="arrow-outer">◆</span>
<spanclass="arrow-inner">◆</span>
<spanclass="item-num">78</span>
</div>

CSS：

.item-num-wrap{
float:left;
margin-right:10px;
width:36px;
height:19px;
line-height:19px;
text-align:center;
border:1pxsolid#dcdcdc;
background:#fff;
position:relative;
}
.arrow-outer,.arrow-inner{
position:absolute;
/*在一个声明中设置所有字体属性Unicode编码5b8b4f53表示宋体*/
font:40012px/19pxsimsun5b8b4f53;
width:12px;
overflow:hidden;
}
.arrow-outer{
color:#dcdcdc;
top:1px;
right:-7px;
}
.arrow-inner{
color:#fff;
top:1px;
right:-6px;
}
.item-num{
color:#999;
}

效果参考：http://www.exp99.com/htmlcss/htmlcss_187.html

C. html中如何使下面的4圆圈移到箭头端

写好了，自己复制到html文件里运行到浏览器去看一下。

<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title></title>
<styletype="text/css">
#animated_div
{
width:30px;
height:30px;
padding:15px10px5px;
background:#92B901;
color:#ffffff;
text-align:center;
position:relative;
font-weight:bold;
font:bold12px'微软雅黑',Verdana,Arial,Helvetica,sans-serif;
animation:animated_div5s1;
-moz-animation:animated_div5s1;
-webkit-animation:animated_div5s1;
-o-animation:animated_div5s1;
border-radius:50px;
-webkit-border-radius:50px;
background-color:red;
}

@keyframesanimated_div
{
0%{left:0px;}
25%{left:0px;}
50%{left:100px;}
55%{left:100px;}
70%{left:100px;}
100%{left:0px;}
}

@-webkit-keyframesanimated_div
{
0%{-webkit-left:0px;}
25%{-webkit-left:0px;}
50%{-webkit-left:100px;}
55%{-webkit-left:100px;}
70%{-webkit-left:100px;}
100%{left:0px;}
}

@-moz-keyframesanimated_div
{
0%{-moz-left:0px;}
25%{-moz-left:0px;}
50%{-moz-left:100px;}
55%{-moz-left:100px;}
70%{-moz-left:100px;}
100%{left:0px;}
}

@-o-keyframesanimated_div
{
0%{left:0px;}
25%{left:0px;}
50%{left:100px;}
55%{left:100px;}
70%{left:100px;}
100%{left:0px;}
}
</style>
</head>

<body>
<divid="animated_div">4</div>

</body>
</html