通過(guò)CSS邊框?qū)崿F(xiàn)三角形和箭頭的實(shí)例代碼
我要評(píng)論一、CSS盒子模型
盒子包括：margin、border、padding、content
邊框交界處呈現(xiàn)平滑的斜線，利用此特點(diǎn)，通過(guò)設(shè)置各邊框?qū)挾群皖伾梢缘玫叫∪堑取?br />
div元素是塊級(jí)元素，顯示為塊框，可以利用它來(lái)具體實(shí)現(xiàn)。
<div class="triangle "></div> <div class="arrow"></div>
**例1、**一般設(shè)置高度、寬度及邊框后，盒子呈現(xiàn)如下圖：
.triangle {
width: 25px;
height: 25px;
overflow: hidden;
font-size: 0;
line-height: 0;
border-width: 50px;
border-style: solid;
border-color: rgb(235, 54, 241) rgb(86, 245, 139) rgb(76, 0, 255) rgb(46, 205, 245);
}
注：設(shè)置overflow、font-size、line-height，是因?yàn)樵贗E6下會(huì)具有默認(rèn)的字體大小和行高, 導(dǎo)致盒子呈現(xiàn)被撐開(kāi)的長(zhǎng)矩形。
例2、將例1中的寬度和高度設(shè)置為0后，盒子呈現(xiàn)如下圖：
.triangle {
width: 0;
height: 0;
overflow: hidden;
font-size: 0;
line-height: 0;
border-width: 50px;
border-style: solid;
border-color: rgb(235, 54, 241) rgb(86, 245, 139) rgb(76, 0, 255) rgb(46, 205, 245);
}
此時(shí)，可以看到盒子是由四個(gè)三角形組成的。如果只保留一種顏色, 將其他3種顏色設(shè)置為透明或與背景同色, 就能實(shí)現(xiàn)三角形。根據(jù)選擇留下不同位置的邊，可以呈現(xiàn)出不同朝向的三角形。
例3、只保留底邊
.triangle {
width: 0;
height: 0;
overflow: hidden;
font-size: 0;
line-height: 0;
border-width: 50px;
border-style: solid;
border-color: transparent transparent rgb(76, 0, 255) transparent;
}
例4：在例3中的寬度和高度保留，可以得到梯形
width: 0; height: 0;
例5、實(shí)現(xiàn)箭頭
箭頭其實(shí)是通過(guò)2個(gè)三角形錯(cuò)位疊加來(lái)實(shí)現(xiàn)的。
用錯(cuò)開(kāi)1px的白色三角形覆蓋藍(lán)色三角形，形成箭頭。
下面的樣式實(shí)現(xiàn)了一個(gè)向上箭頭：
. arrow {
position: absolute;
}
. arrow:before,. arrow:after{
position: absolute;
content: '';
border-top: 10px transparent solid;
border-left: 10px transparent solid;
border-right: 10px transparent solid;
border-bottom: 10px #fff solid;
}
. arrow:before{
border-bottom: 10px #0099CC solid;
}
. arrow:after{
top: 1px; /*覆蓋并錯(cuò)開(kāi)1px*/
border-bottom: 10px #fff solid;
}
總結(jié)
以上所述是小編給大家介紹的通過(guò)CSS邊框?qū)崿F(xiàn)三角形和箭頭的實(shí)例代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
相關(guān)文章
- 下面的效果完全是用css 來(lái)實(shí)現(xiàn)的，那么是怎么實(shí)現(xiàn)的呢，我們知道 html 中有一些特殊的字符，通過(guò)特殊字符，利用 css 中的margin或者position方法完全可以實(shí)現(xiàn)以上效果，感2013-03-28
本文給大家介紹如何把三角畫(huà)出來(lái)，基于css代碼實(shí)現(xiàn)小三角邊框原理解析，感興趣的朋友跟隨小編一起看看吧2021-11-03
