CSS 小三角

MycLambert 發(fā)布于2019-08-28 18:24 / 1781人閱讀

prev,#next{

border-left: 5px solid transparent;
border-right: 5px solid transparent;
position: absolute;
height: 0;
width: 0;

}

/向上三角形/

prev {

border-bottom: 5px solid #9bb40e;

}

/向下三角形/

next {

border-top: 5px solid #9bb40e;

}

left,#right {

border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
position: absolute;
height: 0;
width: 0;

}

/向左三角形/

left {

   border-right: 5px solid #9bb40e;

}

/向右三角形/

right {

  border-left: 5px solid #9bb40e;

}

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/111215.html

相關(guān)文章

CSS中的一下小技巧1之CSS3三角形運(yùn)用

摘要：后來知道原來可以用實(shí)現(xiàn)三角形，可是用過一次后很容易忘記，所以想把這個(gè)小技巧記錄起來是如何實(shí)現(xiàn)三角形的呢答案是通過邊框，也就是屬性。使用CSS3實(shí)現(xiàn)三角形：　　在前端頁(yè)面中有很多時(shí)候會(huì)遇到需要三角形圖案的時(shí)候，以前不知道可以用CSS3實(shí)現(xiàn)三角形的時(shí)候，一般都是叫UI把三角形圖案切出來。　　后來知道原來可以用CSS3實(shí)現(xiàn)三角形，可是用過一次后很容易忘記，所以想把這個(gè)小技巧記錄起來~ 　　C...

番茄西紅柿 2019-04-23 11:48 評(píng)論0 收藏0
如何用css畫三角形

摘要：那問題來了，如何用來畫三角形呢別著急，先來看看我所遇到過的三角形。如下圖，有實(shí)心三角形，空心的，還有可以歸為三角形的小箭頭。畫一個(gè)三角形，首先想到的是如何畫三角形的形狀，然后給一個(gè)背景顏色。在設(shè)計(jì)稿中，經(jīng)常會(huì)出現(xiàn)好多三角形，如果將三角形變成圖片，通過img標(biāo)簽的src或者background中的url來訪問，從前端性能方面來看這并不好。那問題來了，如何用css來畫三角形呢？別著急，先...

Yuqi 2019-08-30 13:06 評(píng)論0 收藏0
CSS3 巧妙實(shí)現(xiàn)聊天氣泡

摘要：想必大家都知道，這里不贅述，聊一聊其他實(shí)現(xiàn)方法。這里的三角形部分可以使用正方形代替，實(shí)現(xiàn)同樣效果，方法就是旋轉(zhuǎn)小正方形使其一部分露在外面。 showImg(https://segmentfault.com/img/bVEcKn?w=4136&h=1956); 前一陣子敢玩的 Mobile 頁(yè)改版完成了，就之前的頁(yè)面風(fēng)格更加扁平化，從暗色系為主背景轉(zhuǎn)到亮色背景，去掉更多的陰影，給用戶簡(jiǎn)約...

bang590 2019-08-29 11:26 評(píng)論0 收藏0
純css三角形及其應(yīng)用

摘要：前言對(duì)于氣泡對(duì)話框或者與內(nèi)容連接部分會(huì)有小三角形效果，可能在以前直接用圖片去實(shí)現(xiàn)，其實(shí)用純即可實(shí)現(xiàn)，下面要實(shí)現(xiàn)的效果分別是微信對(duì)話框和面包屑，以此回顧記錄一下。前言對(duì)于氣泡對(duì)話框或者Popover與內(nèi)容連接部分會(huì)有小三角形效果，可能在以前直接用圖片去實(shí)現(xiàn)，其實(shí)用純css即可實(shí)現(xiàn)，下面要實(shí)現(xiàn)的效果分別是微信對(duì)話框和面包屑，以此回顧記錄一下。效果如下： showImg(https:/...

aaron 2019-08-30 14:04 評(píng)論0 收藏0
使用css實(shí)現(xiàn)全兼容tooltip提示框

摘要：在上一篇中，使用實(shí)現(xiàn)了一個(gè)全兼容的三角形圖標(biāo)，這個(gè)三角型圖標(biāo)可以使用于多種場(chǎng)景，比如下拉圖標(biāo)多級(jí)菜單等，這篇我們使用這個(gè)圖標(biāo)通過純來實(shí)現(xiàn)一個(gè)我們常見的提示框。 [toc] 在上一篇post中，使用css實(shí)現(xiàn)了一個(gè)全兼容的三角形圖標(biāo)，這個(gè)三角型圖標(biāo)可以使用于多種場(chǎng)景，比如下拉圖標(biāo)、多級(jí)菜單等，這篇post我們使用這個(gè)圖標(biāo)通過純css來實(shí)現(xiàn)一個(gè)我們常見的tooltip提示框。最終效果圖：...

MSchumi 2019-08-28 17:55 評(píng)論0 收藏0