現在我們有乙個需求，就是三角提示框 像這樣：
注意這個三角導航，我們需要達到這樣的效果。
第一種辦法：
現在有兩種方案，第一種需要用到css3的transform。
我們直接上**：
border: 1px solid #ddd;
width: 200px;
height:70px;
margin-top: 200px;
position: relative;
background: white;
} content: '';
border: inherit;
padding: 0.5em;
position: absolute;
background: inherit;/**不加這個的話你會發現 這個偽元素不會將div的border－top給覆蓋掉,bg-image預設是none,bg-color預設是transparent*/
left: 31px;
top: -9px;
transform: rotate(45deg);
border-right: 0;
border-bottom: 0;}
html
現在已經有效果了 看下圖：
這個能應付特定的需求，但是你會發現這個偽元素實際上會遮住div裡面的內容，看下圖
第乙個效果圖因為我們在div裡面用的是h標籤，有預設的margin-top 所以 我們想文字內容緊貼div 這個辦法是不可取的。
第二種辦法：
他用的辦法沒有用到css3的transform 而是單純的用控制border來實現，首先我們明確一點我們畫乙個三角形可以這樣做：
當然這個div的display 不能是inline,若是inline顯示效果**,不能畫出三角形，這位前輩就是在這個基礎上來做的三角導航。有個小貼士，這個也是來自於這個前輩的文章，就是比如我們只需要乙個orientation 為上的三角形,最容易想到的辦法就是 border-bottom 為紅色,其他三個color設定為transparent，之前我就這樣幹過，看起來是對的。
但是， 實際上你會發現高度是100
但是你需要的是上面的空白不要佔位，這時候把border-top設定為none就好了，最後就長這樣：
div css實現帶三角箭頭提示框
帶三角箭頭的提示框，就是下面所示 這是乙個提示框 通常我們都用來實現上面那個小三角，因為這樣方便快速，但是如果處理得不好，會看起來有雜邊，從而影響視覺，所以換一種思路來解決。首先來研究一下css是如何實現三角形的。假定有乙個盒子 div 給定寬高分別為100畫素，再給定邊框50畫素，那麼它看起來會是...
用css畫三角形（提示框三角形）
1 有邊框的三角形 我們來寫下帶邊框的三角形。如果是乙個正方形，我們寫邊時，會用到border，但我們這裡討論的三角形本身就是border，不可能再給border新增border屬性，所以我們需要用到其他辦法。最容易想到的，是疊加層。思路是將兩個三角形疊加在一起，外層三角形稍大一些，顏色設定成邊框所...
阻塞提示框
函式原型 void ceikonenv alertwin const tdesc amsg void ceikonenv alertwin const tdesc amsg1,const tdesc amsg2 static void ceikonenv infowinl const tdesc a...