思路：通過border寬度和顏色來設定三角形
1、無邊框的三角形
>
無邊框的三角形h3
>
>
向上的三角形p
>
class
="up"
>
div>
>
向下的三角形p
>
class
="down"
>
div>
.up.down
>
有邊框的三角形h3
>
>
向左的三角形p
>
class
="left"
>
>
span
>
div>
>
向右的三角形p
>
class
="right"
>
>
span
>
div>
.left
.right
.right span
有邊框的三角形的位置設定需要注意：我們看到的三角形是邊，而不是真的具有內容的區域。且絕對定位，是根據相對定位父層內容的邊界計算的，而在我們最初的定位中，內容的寬度和高度都為0，即內容就是div的中心點，我們absolute的定位會以這個中心點作為參考來移動，如向左的三角形。
結果截圖如下：
3、直角三角形
>
直角三角形h3
>
class
="right-tri1"
>
>
span
>
div>
class
="right-tri2"
>
>
span
>
div>
.right-tri1
4、實現氣泡框
>
氣泡框的三角形h3
>
class
="bubble"
>
href
="#"
>
芃芃其麥a
>
class
="popup"
>
>
>
em>
span
>
氣泡框三角形
div>
div>
.bubble
.popup span
em結果截圖如下：
參考文件：
css 修改三角形大小 css實現三角形
最近的乙個專案頁面中，有很多三角形icon，在不考慮ie相容性下，使用了css實現三角形，記錄一下 1 實心三角形，利用transparent實現 1 設定線條寬50px，div 寬高0 width 0px height 0px border right 100px solid red border...
css三角形實現
我們的網頁因為 css 而呈現千變萬化的風格。這一看似簡單的樣式語言在使用中非常靈活，只要你發揮創意就能實現很多比人想象不到的效果。特別是隨著css3的廣泛使用，更多新奇的 css 作品湧現出來。up 1 2 3 4 5 6 7 up down 12 3 4 5 6 7 down left 12 3...
css實現三角形
css實現三角形是經常被問到的問題。所以下來就講一下css實現三角形的三種方法 transparent設定時透明的。順序為上右下左。實現類似於對話方塊的形式。底下的三角形的實現是兩個三角形。乙個是背景色，乙個是邊框色。背景色的比邊框色少1px，且利用背景色覆蓋在邊框色上面，就看到的只是邊框了。首先先...