免費(fèi)AI編程助手
我們?cè)谥谱黛o態(tài)頁(yè)面的時(shí)候一般的都會(huì)使用一些什么箭頭、按鈕等等各種形狀的控件，但是一般比較常使用的就是用圖片加入然后再設(shè)置函數(shù)從而達(dá)到預(yù)期的效果，那么今天我們就來(lái)說(shuō)說(shuō)不用照片怎么設(shè)計(jì)一個(gè)箭頭吧！
1.編寫(xiě)盒子代碼
首先我們使用開(kāi)發(fā)工具設(shè)置編碼格式為? Utf-8?（一般的文件都是這個(gè)格式，這邊我們使用的是HBuilderX編輯器）在 .html文件中加入代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html小箭頭技巧</title>
</head>
<body>
<div id="content">
<i class="dd"></i><br />
<i class="d2"><i class="d3"></i></i>
</div>
<script type="text/javascript">
</script>
</body>
</html>
我們?cè)诖a中還添加了?類(lèi)屬性?從而方便我們的樣式設(shè)計(jì)。
2.添加樣式
我們通過(guò)在 .html 文件中添加內(nèi)聯(lián)式的 css 樣式從而實(shí)現(xiàn)我們想要的效果，代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html小箭頭技巧</title>
</head>
<style>
/*margin-left在ie中會(huì)出現(xiàn)2倍邊距bug，解決辦法：在style里面添加display:inline。*/
* {
padding: 0px;
margin: 0px;
}
#content {
width: 100px; height: 100px;
margin: 0 auto; border: 1px solid red;
position: relative;
}
/*小三角形的尖角要向那一邊，那一邊的寬度就設(shè)置為0*/
.dd {
position: absolute;
top: 20px; left: 10px;
border-width: 20px 20px 0px 20px;
border-color: black transparent transparent transparent;
border-style: solid dashed dashed dashed;
}
</style>
<body>
<div id="content">
<i class="dd"></i><br />
<i class="d2"><i class="d3"></i></i>
</div>
<script type="text/javascript">
</script>
</body>
</html>
在代碼中我們添加了絕對(duì)定位 ?position: absolute;? 來(lái)設(shè)置我們的箭頭位置。通過(guò)樣式我們就可以完成箭頭的設(shè)置，我們來(lái)看下結(jié)果吧！
這樣我們就完成了箭頭的設(shè)計(jì)當(dāng)然結(jié)果的中的紅框框我們是可以去掉的，這邊為了大家的理解小編就沒(méi)有去掉了。
總結(jié)：
通過(guò)小編分享的這個(gè)方法希望對(duì)大家的學(xué)習(xí)有所幫助，當(dāng)然要是你有更好的方法或者想法也可以一起和小伙伴們分享你的想法和成果，更多相關(guān)的前端知識(shí)和課程我們都可以在W3cschool中學(xué)習(xí)和了解。
