本篇文章給大家分享的是有關(guān)怎么在CSS中實現(xiàn)三角形和箭頭，小編覺得挺實用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。
成都創(chuàng)新互聯(lián)公司主要從事做網(wǎng)站、網(wǎng)站制作、網(wǎng)頁設(shè)計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)太子河,10多年網(wǎng)站建設(shè)經(jīng)驗,價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18980820575
一、CSS盒子模型
盒子包括：margin、border、padding、content
邊框交界處呈現(xiàn)平滑的斜線，利用此特點，通過設(shè)置各邊框?qū)挾群皖伾梢缘玫叫∪堑取?br/>div元素是塊級元素，顯示為塊框，可以利用它來具體實現(xiàn)。
**例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下會具有默認的字體大小和行高, 導(dǎo)致盒子呈現(xiàn)被撐開的長矩形。
例2、將例1中的寬度和高度設(shè)置為0后，盒子呈現(xiàn)如下圖：
.jpg)
.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中的寬度和高度保留，可以得到梯形
.jpg)
width: 0; height: 0;
例5、實現(xiàn)箭頭
箭頭其實是通過2個三角形錯位疊加來實現(xiàn)的。
用錯開1px的白色三角形覆蓋藍色三角形，形成箭頭。
下面的樣式實現(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;
}css的基本語法是：1、css規(guī)則由選擇器和一條或多條聲明兩個部分構(gòu)成；2、選擇器通常是需要改變樣式的HTML元素；3、每條聲明由一個屬性和一個值組成；4、屬性和屬性值被冒號分隔開。
以上就是怎么在CSS中實現(xiàn)三角形和箭頭，小編相信有部分知識點可能是我們?nèi)粘９ぷ鲿姷交蛴玫降摹ＯＭ隳芡ㄟ^這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
