通過CSS邊框?qū)崿F(xiàn)三角形和箭頭的實例代碼
發(fā)布時間：2020-01-15 09:22:18 作者：佚名 
我要評論
我要評論這篇文章主要介紹了通過CSS邊框?qū)崿F(xiàn)三角形和箭頭的實例代碼,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
一、CSS盒子模型
盒子包括：margin、border、padding、content
邊框交界處呈現(xiàn)平滑的斜線，利用此特點，通過設(shè)置各邊框?qū)挾群皖伾梢缘玫叫∪堑取?br />
div元素是塊級元素，顯示為塊框，可以利用它來具體實現(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，是因為在IE6下會具有默認(rèn)的字體大小和行高, 導(dǎo)致盒子呈現(xiàn)被撐開的長矩形。
例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);
}
此時，可以看到盒子是由四個三角形組成的。如果只保留一種顏色, 將其他3種顏色設(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、實現(xiàn)箭頭
箭頭其實是通過2個三角形錯位疊加來實現(xiàn)的。
用錯開1px的白色三角形覆蓋藍(lán)色三角形，形成箭頭。
下面的樣式實現(xiàn)了一個向上箭頭：
. 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; /*覆蓋并錯開1px*/
border-bottom: 10px #fff solid;
}
總結(jié)
以上所述是小編給大家介紹的通過CSS邊框?qū)崿F(xiàn)三角形和箭頭的實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
- 下面的效果完全是用css 來實現(xiàn)的，那么是怎么實現(xiàn)的呢，我們知道 html 中有一些特殊的字符，通過特殊字符，利用 css 中的margin或者position方法完全可以實現(xiàn)以上效果，感2013-03-28
本文給大家介紹如何把三角畫出來，基于css代碼實現(xiàn)小三角邊框原理解析，感興趣的朋友跟隨小編一起看看吧2021-11-03
