先來看一下尖角效果
乙個div，右側邊框的上出現了乙個尖角的形狀。那麼如何來實現這麼乙個效果呢？
1.原理
對於乙個塊級元素，但我們分別將元素的上下左右四個border設定成乙個比較大的畫素（如10px），樣式設定成solid ,分別設定成不同的顏色的時候，同時將元素的width,height設定為0.這時我們將會看到四條邊均呈現為三角形的形狀。如圖：
其css樣式為：
.element
四個三角形分別是四條border四條border所呈現出來的，而我們最終的效果好像跟乙個三角形的關係比較大些。如果得到乙個三角形呢？其實這個很簡單，我們只需要把其餘三條border顏色屬性設定為transparent（透明）的樣式，另乙個border的顏色屬性保持不變。
.element好了，三角形出來了。那我們也就實現了最為關鍵的的地方。我們在弄出來乙個白色的三角形，然後將白色三角形覆蓋到這個有色三角形之上，但是不能完全覆蓋，讓其露出乙個尖角的效果來。這就是基本的原理。
2.實現
首先需要乙個div容器，設定border,width,height的屬性，同時將設定其為相對定位。
然後需要為這個在這個div右邊框上新增兩個三角形，乙個三角形顏色與邊框顏色相同，另乙個三角形顏為白色，用於覆蓋第乙個三角形顏色的一部分。
這裡我們使用元素的偽選擇器:before,:after來加入這兩個三角形，before和after預設為行內元素，所以首先要將其設定為塊級元素，絕對定位。
首先新增before偽選擇器，用它來生成與border顏色的相同的第乙個三角形，並將其定位到左邊框上。
然後新增after偽選擇器，用它生成乙個白色的三角形，並將其定位到左邊框上。這裡需要注意的是白色三角形的大小要比有色三角形要小一些，小多少要根據div邊框的大小而定。我這裡邊框為2px,所以白色三角形就比灰色三角形就小兩個px。這樣可以避免白色三角形將灰色三角形全覆蓋，然後可以產生尖角的效果來。（我這裡說的大小就是設定三角形時的border的px值，如after這裡是18px,before那裡是20px）
content: "";
width: 0;
height: 0;
border: 18px solid transparent;
border-left-color: #ffffff;
position: absolute;
left: 100%;
top: 50%;
margin-top: -18px;
}用絕對定位將這個白色三角形定位到左邊框上，覆蓋掉灰色三角形的一部分，留下乙個尖角。好了，最終的效果就是這樣的。
完成。
CSS為div新增尖角樣式
先來看一下尖角效果 乙個div，右側邊框的上出現了乙個尖角的形狀。那麼如何來實現這麼乙個效果呢？1.原理 對於乙個塊級元素，但我們分別將元素的上下左右四個border設定成乙個比較大的畫素 如10px 樣式設定成solid 分別設定成不同的顏色的時候，同時將元素的width,height設定為0.這...
CSS為DIV新增尖角指向
首先先看下怎麼生成三角形 生成這個圖案，需要設定乙個div，寬高都設定成0，設定邊框線 這樣就有三角形了 1.如果設定箭頭向上上方邊框線取消掉，將左右方向邊框線設定為透明 2.如果設定箭頭向下 同理下方邊框線取消掉，將左右方向邊框線設定為透明 3.如果設定箭頭向左 將右側邊框線取消掉，將上下方向邊框...
CSS 為網頁新增樣式
css全稱為 層疊樣式表 cascading style sheets 它主要是用於定義html內容在瀏覽器內的顯示樣式，如文字大小 顏色 字型加粗等。如下列 p使用css樣式的乙個好處是通過定義某個樣式，可以讓不同網頁位置的文字有著統一的字型 字型大小或者顏色等。為什麼使用css樣式來設定網頁的外...