純css三角形及其應用

aaron 發布于2019-08-30 14:04 / 581人閱讀

摘要：前言對于氣泡對話框或者與內容連接部分會有小三角形效果，可能在以前直接用圖片去實現，其實用純即可實現，下面要實現的效果分別是微信對話框和面包屑，以此回顧記錄一下。

前言

對于氣泡對話框或者Popover與內容連接部分會有小三角形效果，可能在以前直接用圖片去實現，其實用純css即可實現，下面要實現的效果分別是微信對話框和面包屑，以此回顧記錄一下。

效果如下：

css寫三角形原理

首先我們設置一個div元素的寬高和邊框，觀察效果

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

效果

可以發現分別觀察四邊框是按類似等邊梯形繪制的，如果進一步把寬高設小，甚至設為0，就會呈現為三角形，于是

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

效果

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

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

效果

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

應用

有時我們不需要整個實心的三角形，而只需要類似與>不同方向箭頭的效果，例如popover氣泡框效果。這樣就需要兩個三角形通過重疊錯位來實現這樣的效果，重疊三角形B顏色和氣泡框背景色一樣，被重疊三角形A顏色和氣泡框邊框顏色一樣。

實現微信對話框效果

兩個三角形重疊錯位，意味著要兩個元素，但是這樣一來就增加了這個小功能的復雜度，其實可以利用標簽的偽元素:before和:after來充當元素畫出兩個三角形。

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;
}

效果

實現面包屑效果

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

html部分


    第一級
    第二級
    第三級
    第四級

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;
}

效果

當然，還是css3通過旋轉實現的方法，簡單粗暴，到后面在補充了。還有什么好方法歡迎提出哈。

云服務器 GPU云服務器純CSS css三角形 css三角及其應用

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115751.html

純CSS Material Design風格按鈕

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

YorkChen 2019-08-02 16:14 評論0 收藏0
純CSS Material Design風格按鈕

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

lsxiao 2019-08-29 18:43 評論0 收藏0
純CSS畫三角原理解析

摘要：純畫三角原理解析因為之前做一個頁面出現了很多三角，開始直接用圖片感覺并不是很好用，看著總是怪怪的顏色還很難調整的跟背景一樣，就搜了一波代碼直接用上了，事后想了一下感覺不知道具體原理是什么，很奇怪為什么邊框能設置成三角的樣式。純CSS畫三角原理解析因為之前做一個頁面出現了很多三角，開始直接用圖片感覺并不是很好用，看著總是怪怪的顏色還很難調整的跟背景一樣，就搜了一波代碼直接用上了，事后...

lidashuang 2019-08-30 14:03 評論0 收藏0
純 Css 繪制扇形

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

kel 2019-08-29 13:48 評論0 收藏0
純CSS實現對白框

摘要：如果一個盒子的長寬都為零，那么它的四條就會碰到一起，變成實心的，而且每一條都是一個三角形我們就可以利用三角形來實現對白框的尖下巴。可以用和偽元素來實現，也可以在大盒子里放置小盒子再絕對定位。如果一個盒子的長寬都為零，那么它的四條border就會碰到一起，變成實心的，而且每一條border都是一個三角形；我們就可以利用三角形來實現對白框的尖下巴。通過把border上左設置為有顏色，...

jlanglang 2019-08-30 13:20 評論0 收藏0