前些天在牛課網上看到了一個百度的面試題，題目如下：

請用CSS實現如下圖的樣式，相關尺寸如圖示，其中dom結構為：
<div id=”demo”></div>

剛看到這個題目覺得無從下手，感覺一般這種不都是一個背景圖片嗎，怎麼還能用css寫的?? 後來看到網友的答案，試著運行了一下發現真的和圖上的一模一樣，最傷心的是看到答案竟然還看不懂。。覺得自己還是好水，仔細琢磨了一下，現將心得整理一下：

實現圖示的效果涉及到的知識主要有兩點：一個是before、after偽元素，一個是border

1、before 和 after 都是css中的偽元素，他們倆用法都差不多，通過給定一個屬性content給元素新增新的內容，不同的是before用來在元素前插入新內容，after用來在元素後面插入新內容。

比如有一個p元素：水

<p>水</p>

p:before{
  content:"上海自來";
}

相反的，如果是用after：

p:after{
  content:"來自海上";
}

簡單的before、after使用就是這樣，一開始看的時候覺得好簡單，不就是插入個內容嗎，但實際上插內容不算什麼，最重要的是它能設！置！樣！式！一旦給它設定各種各樣的樣式之後這個偽元素就厲害了，比如題目中的尖角，題目只給了一個div我們，但是很明顯div只能弄出一個左邊的帶邊框正方形，右邊的尖角怎麼來的呢，那就可以靠這個偽元素了。

思路很簡單，先把正方形畫出來，然後通過before或者after變出一個尖角出來，放到正方形右上角去。div如下：

#demo{
  width:100px;
  height:100px;
  background-color:#fff;
  border: 2px #000 solid;
}

2、以前使用border都是border：1px #000 solid，頂多換換顏色和邊框值，沒想到畫三角形也能靠它……

以前沒發現的原因在於使用border的時候總是1px、2px的，太細了，當把邊框變成20px的時候就有意思了，下面是一個邊長10px的正方形設定其邊框長也為10px：

我們知道可以通過設定border-left等等手動設定四個邊框為不同顏色，分別設定之後：

馬上看出靠譜，如果把這個div的寬度減小到0之後豈不就是四個三角形了，動手實驗：

果然是，那把上下右的顏色變透明之後就能得到一個三角形拉，在這裡要注意的是把其他三個邊透明是能得到一個三角形的，但是如果只設置左邊框而不設定其他三個邊框是得不到的，自己動手試下便知，因為如果只設置左邊框，而這個div的高度又為0，那這個左邊框是不會向上下兩端擴充套件的，只有當上或下也有邊框時才會呈現出一個三角形，所以我們可以把所有邊框透明掉，然後把左邊框顯示即可。比如下面這樣：

diiv{
  width:0px;
  height:0px;
  border: 20px transparent solid;
  border-left-color: #000;
}

那把三角形放到正方形右側就很簡單了，有一點是那個正方形是缺了一段的，我們可以讓三角形顏色為白色覆蓋掉正方形的邊框，另外再用一個黑色的比白色三角形大一點的三角形放在白三角形下面，這樣就只漏出了三角形的兩條邊，所以這裡同時用到了before和after。

因為before和after插入的三角形是放在指定的位置的，所以它們的position都設定為絕對定位，那麼div就要設定成相對定位了：

#demo{
  width:100px;
  height:100px;
  border: 2px #000 solid;
  background-color:#fff;
  position:relative;
}

首先是黑色的三角形：

#demo:before{
  width:0px;
  height:0px;
  border: 10px transparent solid;
  border-left-color: #000;
  position:absolute;
  top:20px;
  left:100%;
  content:""
}

然後是比黑色三角形小一點點的白色三角形：

#demo:after{
  width:0px;
  height:0px;
  border: 8px transparent solid;
  border-left-color: #fff;
  position:absolute;
  top:22px;
  left:100%;
  content:""
}

由此這個題目就做完拉，當然相同的樣式可以整理下，最終樣式如下：

			#demo{
			  width:100px;
			  height:100px;
			  border: 2px #000 solid;
			  background-color:#fff;
			  position:relative;
			}
			#demo:before, #demo:after{
			  width:0px;
			  height:0px;
			  border:transparent solid;
			  position:absolute;
			  left:100%;
			  content:""
			}
			#demo:before{
			  border-width:10px;
			  border-left-color: #000;
			  top:20px;
			}
			#demo:after{
			  border-width:8px;
			  border-left-color: #fff;
			  top:22px;
			}