成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

純css三角形及其應(yīng)用

aaron / 602人閱讀

摘要：前言對(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ì)話框和面包屑，以此回顧記錄一下。

效果如下：

css寫(xiě)三角形原理

首先我們?cè)O(shè)置一個(gè)div元素的寬高和邊框，觀察效果

.demo1 {
  width: 40px;
  height: 40px;
  border-width: 20px;
  border-style: solid;
  border-color: #ff0000 #00ff00 #0000ff #ff00ff;
}

效果

可以發(fā)現(xiàn)分別觀察四邊框是按類似等邊梯形繪制的，如果進(jìn)一步把寬高設(shè)小，甚至設(shè)為0，就會(huì)呈現(xiàn)為三角形，于是

.demo2 {
  width: 0;
  height: 0;
  border-width: 20px;
  border-style: solid;
  border-color: #ff0000 #00ff00 #0000ff #ff00ff;
}

效果

果然是這樣的，下面要做的是把其中某個(gè)三角形多帶帶提取出來(lái)顯示，其他都顯示為transparent，于是就有了

.demo3 {
  width: 0;
  height: 0;
  border-width: 20px;
  border-style: solid;
  border-color: transparent;
  border-left-color: #ff00ff;
}

效果

一個(gè)指向右邊的三角形大功告成，要其他方向的三角形，只需改變透明的邊框即可。

應(yīng)用

有時(shí)我們不需要整個(gè)實(shí)心的三角形，而只需要類似與>不同方向箭頭的效果，例如popover氣泡框效果。這樣就需要兩個(gè)三角形通過(guò)重疊錯(cuò)位來(lái)實(shí)現(xiàn)這樣的效果，重疊三角形B顏色和氣泡框背景色一樣，被重疊三角形A顏色和氣泡框邊框顏色一樣。

實(shí)現(xiàn)微信對(duì)話框效果

兩個(gè)三角形重疊錯(cuò)位，意味著要兩個(gè)元素，但是這樣一來(lái)就增加了這個(gè)小功能的復(fù)雜度，其實(shí)可以利用標(biāo)簽的偽元素:before和:after來(lái)充當(dāng)元素畫(huà)出兩個(gè)三角形。

html部分

hi，在嗎？

css部分

.chat-dialog {
  position: relative;
  width: 180px;
  height: 32px;
  line-height: 32px;
  border-radius: 5px;
  margin-left: 30px;
  border: 1px solid #009a61;
  padding: 4px;
}

.chat-dialog:before,
.chat-dialog:after {
  content: "";
  display: block;
  position: absolute;
  top: 13px;
  left: -13px;
  width: 0;
  height: 0;
  border-width: 6px;
  border-color: transparent;
  border-style: solid;
  border-right-color: #009a61;
}

.chat-dialog:after {
  left: -12px;
  border-right-color: #fff;
}

效果

實(shí)現(xiàn)面包屑效果

同樣的實(shí)現(xiàn)面包屑效果，只是在每塊后面留出空位，再用偽元素:before和:after定位出箭頭效果

html部分

    
    
  • 第一級(jí)
    • 
    
  • 第二級(jí)
    • 
    
  • 第三級(jí)
    • 
    
  • 第四級(jí)
    •

css部分

.tag-tab {
  font-size: 16px;
  height: 24px;
  list-style: none;
}

.tag-tab li {
  float: left;
  position: relative;
  padding-right: 12px;

}

.tag-tab>li:before,
.tag-tab>li:after {
  position: absolute;
  top: 0;
  right: -12px;
  border-width: 12px;
  border-color: transparent;
  border-left-color: #333;
  border-style: solid;
  content: "";
  z-index: 1;
}

.tag-tab>li:after {
  right: -11px;
  border-left-color: #fff;
}

.tag-tab>li:hover {
  color: #009a61;
}

.tag-tab>li:hover:before {
  border-left-color: #009a61;
}

效果

當(dāng)然，還是css3通過(guò)旋轉(zhuǎn)實(shí)現(xiàn)的方法，簡(jiǎn)單粗暴，到后面在補(bǔ)充了。還有什么好方法歡迎提出哈。

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

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

相關(guān)文章

  • 純CSS Material Design風(fēng)格按鈕

    摘要：以上就是純粹利用做出來(lái)的風(fēng)格按鈕，相信熟練之后就可以做出更多不錯(cuò)的應(yīng)用啰 其實(shí)Material Design的扁平化icon按鈕，這類型的按鈕往往只利用幾何色塊的變化，就能抓住使用者的眼光，并且從幾何形狀中明白按鈕的含意，這也是Material Design非常強(qiáng)調(diào)的設(shè)計(jì)理念和精髓。showImg(https://segmentfault.com/img/bVbrRZq); 應(yīng)用重點(diǎn)與...

    YorkChen 評(píng)論0 收藏0

  • 純CSS Material Design風(fēng)格按鈕

    摘要：以上就是純粹利用做出來(lái)的風(fēng)格按鈕，相信熟練之后就可以做出更多不錯(cuò)的應(yīng)用啰 其實(shí)Material Design的扁平化icon按鈕，這類型的按鈕往往只利用幾何色塊的變化，就能抓住使用者的眼光，并且從幾何形狀中明白按鈕的含意，這也是Material Design非常強(qiáng)調(diào)的設(shè)計(jì)理念和精髓。showImg(https://segmentfault.com/img/bVbrRZq); 應(yīng)用重點(diǎn)與...

    lsxiao 評(píng)論0 收藏0

  • 純CSS畫(huà)三角原理解析

    摘要：純畫(huà)三角原理解析因?yàn)橹白鲆粋€(gè)頁(yè)面出現(xiàn)了很多三角，開(kāi)始直接用圖片感覺(jué)并不是很好用，看著總是怪怪的顏色還很難調(diào)整的跟背景一樣，就搜了一波代碼直接用上了，事后想了一下感覺(jué)不知道具體原理是什么，很奇怪為什么邊框能設(shè)置成三角的樣式。 純CSS畫(huà)三角原理解析 因?yàn)橹白鲆粋€(gè)頁(yè)面出現(xiàn)了很多三角，開(kāi)始直接用圖片感覺(jué)并不是很好用，看著總是怪怪的顏色還很難調(diào)整的跟背景一樣，就搜了一波代碼直接用上了，事后...

    lidashuang 評(píng)論0 收藏0

  • 純 Css 繪制扇形

    摘要：顯而易見(jiàn)餅干為兩個(gè)削成了圓形的，我們重點(diǎn)演示果醬是怎么制作的如圖所示，大扇形由個(gè)小扇形構(gòu)成，每一小扇形占整個(gè)圓餅的，大扇形占整個(gè)圓餅的。則小扇形的圓心角為，三角形的高為，寬為。 閱讀此文需具備基本數(shù)學(xué)知識(shí)：圓心角、弧度制、三角函數(shù)。 為實(shí)現(xiàn)如下效果嘔心瀝血： showImg(https://segmentfault.com/img/remote/1460000018140398?w=2...

    kel 評(píng)論0 收藏0

  • 純CSS實(shí)現(xiàn)對(duì)白框

    摘要：如果一個(gè)盒子的長(zhǎng)寬都為零，那么它的四條就會(huì)碰到一起，變成實(shí)心的，而且每一條都是一個(gè)三角形我們就可以利用三角形來(lái)實(shí)現(xiàn)對(duì)白框的尖下巴?？梢杂煤蛡卧貋?lái)實(shí)現(xiàn)，也可以在大盒子里放置小盒子再絕對(duì)定位。 如果一個(gè)盒子的長(zhǎng)寬都為零，那么它的四條border就會(huì)碰到一起，變成實(shí)心的，而且每一條border都是一個(gè)三角形；我們就可以利用三角形來(lái)實(shí)現(xiàn)對(duì)白框的尖下巴。 通過(guò)把border上左設(shè)置為有顏色，...

    jlanglang 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<