當前位置：首頁 » 編程語言 » 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