使用CSS樣式寫選擇框右側(cè)小三角
發(fā)布時(shí)間：2018-01-18 15:37:54 作者：佚名 
我要評論
我要評論本文通過實(shí)例代碼給大家介紹了用CSS樣式寫選擇框右側(cè)小三角的方法，需要的朋友參考下吧
效果圖如下所示：
直接上代碼！
<!DOCTYPE html>
<html lang="en">
<head>
<title>小三角</title>
<style>
.up-triangle{
width:0px;
height:0px;
border-bottom:30px solid #000;
border-left:15px solid transparent;
border-right:15px solid transparent;
margin:100px auto;
}
.down-triangle{
width:0px;
height:0px;
border-top:30px solid #000;
border-left:15px solid transparent;
border-right:15px solid transparent;
margin:100px auto;
}
.left-triangle{
width:0px;
height:0px;
border-right:30px solid #000;
border-top:15px solid transparent;
border-bottom:15px solid transparent;
margin:100px auto;
}
.right-triangle{
width:0px;
height:0px;
border-left:30px solid #000;
border-top:15px solid transparent;
border-bottom:15px solid transparent;
margin:100px auto;
}
</style>
</head>
<body>
<div class="up-triangle"></div>
<div class="down-triangle"></div>
<div class="left-triangle"></div>
<div class="right-triangle"></div>
</body>
</html>
總結(jié)
以上所述是小編給大家介紹的用CSS樣式寫選擇框右側(cè)小三角，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
- 這篇文章主要介紹了 CSS 樣式書寫規(guī)范,包括編碼設(shè)置，命名空間規(guī)范等知識，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2018-03-29
在線css sprite/css精靈/雪碧圖css樣式生成工具
這是一款腳本之家翻譯自國外網(wǎng)站的css樣式工具，可在線生成css精靈/雪碧圖樣式。用戶只需點(diǎn)擊按鈕上傳雪碧圖片即可通過鼠標(biāo)點(diǎn)擊拖動(dòng)來選擇雪碧圖上的小圖案，待系統(tǒng)自動(dòng)確2018-01-24
CSS使用classList實(shí)現(xiàn)兩個(gè)按鈕樣式的切換
在一些頁面我們需要使用兩個(gè)按鈕來回切換，怎么實(shí)現(xiàn)這樣的功能呢？下面小編給大家?guī)砹薈SS使用classList實(shí)現(xiàn)兩個(gè)按鈕樣式的切換效果，需要的朋友跟隨腳本之家小編一起學(xué)習(xí)2018-01-24
css判斷某元素的子元素個(gè)數(shù)并分別設(shè)置樣式的方法
這篇文章主要介紹了css判斷某元素的子元素個(gè)數(shù)并分別設(shè)置樣式的方法的相關(guān)資料，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-17
jQuery ui和css3制作一款精致圓形音樂播放器，內(nèi)嵌背景圖片非常漂亮，帶播放進(jìn)度條，可以控制播放暫停、調(diào)整音量等播放器常用的功能。 本段代碼可以在各個(gè)網(wǎng)頁使用，有需要2018-01-11
這篇文章主要介紹了css樣式改變及實(shí)際用法詳解,需要的朋友可以參考下2018-04-09
