CSS僞類+border實現Banner標籤、冒泡式提醒等

一、前言

在實現Banner和冒泡式提醒前，我們可以先了解一下border的實現規律，語言不好表述，直接上代碼和效果圖。

  width: 0; height: 0;
  border-top:20px solid;
  border-left:20px solid red;
  border-right:20px solid green;
  border-bottom:20px solid blue;

在div中書寫內容

顯而易見，border的填充方式是三角形填充，那我們便可以進行一些有用的變化，實現一些經常用的圖形。

下拉列表處，我們經常用到，如果爲了用這個小圖形，再引入一個圖片，在background-position定位，不僅加大網站加載量，還書寫麻煩。

代碼如下：(對比圖一可知，這只是top部分，所以別的部分border-color: transparent即可)

 border-top:20px solid;
 border-left:20px solid transparent;
 border-right:20px solid transparent ;
 border-bottom:20px solid transparent;

類似圖形亦可以類比實現。

其二我們要了解一下CSS僞類的知識，CSS的僞類還是比較強大的，在此不贅述，想學習的可以去查資料(這裏主要使用before和after)

二、Banner標籤的實現(效果圖如下)

擴大分析此圖

可見，此Banner標籤有三部分組成，上部和左下部的實現便是簡單border的應用，關鍵在於兩點，其一，content部分(即本圖中的”圖片“);其二在於如何用一個標籤實現三部分功能。

首先我是這麼寫的

.Banner {position:relative;margin:20px;}
.Banner:before {					
padding-right:10px;font-weight:bold;line-height:0px;
color:#000;height:0px;
border: 15px solid #EE7600;			
border-right-color: transparent;	   
content: "圖片";					
box-shadow:-0px 5px 5px -5px #000;
}

很簡單，content需要佔用空間(類比上面的圖二)，那Banner標籤是如何實現的那？

這就是absolute(絕對定位)的強大了，可以說是一種高級的應用。

absolute有兩大特點：其一，原地漂浮性，即飄到對應位置的正上空；其二，不佔據任何寬高。(以後有機會我會更詳盡的書寫一下absolute的高級應用)

因此加上absolute之後，content就自覺的飄升上空，Banner實現完畢。(而且我感覺左下角的那個視覺差異用的贊，開始我還想了很多方案，但都寫不出來)

.Banner {position:relative;margin:20px;}
.Banner:before {
position:absolute;top:5px;left:-8px;z-index:1;						/*定位相關*/
padding-right:10px;font-weight:bold;line-height:0px;
color:#000;height:0px;
border: 15px solid #EE7600;			/*利用的是border屬性*/
border-right-color: transparent;	   /*去掉右邊的邊框*/
content: "圖片";					/*這裏定義標籤上的文字*/
box-shadow:-0px 5px 5px -5px #000;
}
.Banner:after {				/*第二部分的效果*/
content: "";
position:absolute;top:35px;left:-8px;
border: 4px solid #89540c;
border-left-color: transparent;		
border-bottom-color: transparent;
}

三、冒泡式提醒的設計

第二個圖比較簡單，就是兩個僞類的疊加，border-radius:50%. + absolute 定位

第一個圖初一看感覺特別簡單，感覺只需加一個僞類便可，然後得到了如下的結果

顏色不對，只使用一個僞類是存在問題的，於是聚聚們就想了一個很讚的方法，疊加，第一個圖疊加第二個圖，邊框和內容顏色不就很搭配了嗎？(不得不說這種想法很厲害)但其實也是存在bug的因爲他們是無法完全遮蓋的，見下圖

放大後可見，斜邊其實是有一段距離的，但由於單位過小重合了。

  #tips{
  width:200px;height:100px;padding:5px;
  border:1px solid;border-radius:10px;
  position:absolute;display:none;top:-130px;
  background:#D3D3D3;
  }
  #tips:before{content:"";width:0;height:0;
  border-top:10px solid ;border-bottom:5px solid transparent ;border-left:10px solid ;border-right:16px solid transparent;
  position:absolute;left:45%;top:101%;}
  #tips:after{content:"";width:0;height:0;
  border-top:9px solid #D3D3D3 ;border-bottom:4px solid transparent ;border-left:9px solid #D3D3D3;border-right:15px solid transparent;
  position:absolute;left:45.5%;top:100%;}