在各種網站里面，我們會經常看到類似於這樣的尖角：（示例：新浪微博）
它實現的方式有多種，哪種才是最簡單的？哪種才是最優秀的？首先我聲明一下，我還不清楚這個東西具體叫什么名字（哪位知道還望告知），暫且叫尖角吧，通俗易懂。我查看了各大互聯網公司的網站，包括騰訊、百度、新浪、天貓、去哪網，
騰訊:
百度：
去哪網：
天貓：
其中，百度和騰訊直接用的背景圖片，簡單粗暴，沒有藝術細菌。
優點：形狀隨意；
缺點：不方便維護；
下面要說的是新浪微博，右鍵小尖角，查看元素，可以看到一段代碼：
<div class="WB_arrow"><em class="S_line1_c">◆</em><span class="S_bg1_c">◆</span></div>
可以發現，新浪是利用◆文字圖標，顏色與背景色一致，外層邊框同理，兩個◆疊起來留，一上一下留出一個像素就算是邊框了，很巧妙。為了便於理解，我把這兩塊◆改成便於區分的顏色，如下圖：
藍色塊剛好把紅色塊”下半身“遮住了。如果不太明白，請直接移步新浪微博查看源碼。
優點：大小顏色隨意、方便維護；
缺點：形狀固定；
讓人欣慰的是天貓和去哪網的做法，完全代碼實現。以天貓為例：
html部分：
<i class="market-nav-arrow"></i>
css部分：
height: 0;
font-size: 0;
line-height: 0;
border-style: solid;
border-width: 7px 7px 7px 0;
border-color: transparent #f3f3f3;
利用css邊框來模擬尖角，最重要的一句是
border-color: transparent #f3f3f3;
上下邊框透明，左右設定尖角需要的顏色，而左邊框的大小為0，剩下一個大小為7px的右邊框，就構成了上圖天貓中的尖角，讓我把右邊框大小設為7px，結果就這個樣子：
border-width: 7px 7px 7px 7px;
左右兩個尖角，如果需要向右的尖角，只需要把右邊框大小設置為0px即可：
border-width: 7px 0px 7px 7px;
上下尖角同理，去哪網也是這么干的，個人比較喜歡這種方式。
優點：大小、顏色隨意，方便維護；
缺點：形狀單一
又凌晨半點了，該洗洗睡了，以后看到好的做法再來補充~
補充：如果不考慮IE6和7，最好的方式是利用偽類實現尖角效果：
<style> .WB_arrow{width: 200px; height: 200px; border: 2px solid blue; position: relative; margin: 100px auto;} .WB_arrow:before,.WB_arrow:after{ content: ""; width: 0; height: 0; position: absolute;display: block; border-width: 20px; border-style: solid; } .WB_arrow:before{right: -40px; top: 40px; border-color: transparent transparent transparent blue;} .WB_arrow:after{right: -38px; top: 40px; border-color: transparent transparent transparent white;} </style> <div class="WB_arrow"></div>
效果：
優點：大小、顏色隨意，方便維護，減少不必要的代碼；
缺點：不兼容IE6/7