用css製作乙個三角形箭頭
三角形我們經常用在列表、下拉提示、麵包屑導航的位置，給使用者以導向的引導作用，比如，在有下拉列表的地方，我們可以用向下的箭頭，在列表的時候，我們能告訴使用者每個列表項和下乙個列表項的關係，當在麵包屑導航中，能讓使用者了解他現在所處的欄目或者頻道。我們有哪些方法來實現它呢，下面我根據我們的實際工作中的經驗作了簡單的總結。
第一種方案，我們可以通過使用背景的方式來處理，這也是我們最經常用的方法。
1）單個切出三角形，我們可以根據ui設計的需求，切出與之相適應的，比如 ，我們能方便的根據需求，製作不同高度和顏色的三角形。在使用方面，html**和css**相對簡單。如下面圖是示例：
) no-repeat 0 0;width:67px;height:34px;display:block;position:absolute;top:-34px;left:15px"$amp;>amp;$lt;/em$amp;>amp;$lt;em color: #000000;">) no-repeat -35px 0;width:34px;height:67px;display:block;position:absolute;right:-34px;top:15px;"$amp;>amp;$lt;/em> ) no-repeat 0 -35px;width:67px;height:34px;display:block;position:absolute;bottom:-34px;left:15px;"$amp;>amp;$lt;/em> ) no-repeat 0 0;width:34px;height:67px;display:block;position:absolute;left:-34px;top:15px;"$amp;>amp;$lt;/em$amp;>amp;$lt;/div>
3）方法二種的方法雖然我們可以實現呼叫一次背景標示四種三角狀態的情況，但是在顏色方面確實單一的，我們只能由一種顏色，那我們需要增加三角形同樣在激發滑鼠懸浮偽類響應的時候，我們應該怎麼做呢？比如滑鼠懸浮的時候由紅色變成橙色？那我們就可以使用這種方法，通過正負形的方法，方法二中的方法我們通過乙個正形，那下面的例子我們使用乙個負形
html檔案
amp;$lt;/a>
amp;$lt;/a>
amp;$lt;/a>
amp;$lt;/a>
css檔案
.n_a_1,.n_a_2,.n_a_3,.n_a_4
a.n_a_1
a.n_a_1:hover
a.n_a_2
a.n_a_2:hover
a.n_a_3
a.n_a_3:hover
a.n_a_4
a.n_a_4:hover
這樣子，我們就能很方便的改變背景顏色來獲得不同的顏色的三角形了。
但是我們也發現了另乙個問題，那就是當我們希望把這個三角形放到有顏色的背景時，構成其負形的區域顏色也會成為我們的限制，因為我們必須將構成負形的顏色與之相匹配。而且第二種方法和第三種方法中只能實現固定尺寸的正三角形，如果我們想隨時改變它形狀的話，不使用css3的背景大小屬性background-size話（此屬性已經已經被opera\firefox\safari\chrome\ie 9），可能下面的方法更適合。
相關**：
我們可以改變border不同方向的顏色來找到我們需要的顏色，我們甚至可以通過border-width的修改,創造不同角度的三角形.
當我們將旋轉後的正方形的背景色色值設定為相交盒形相同的色值時,他們就融為一體了.
3)通過◆字元實現.實現方法與上面的類似,將字元的顏色設定為和希望表現得容器相同的顏色,從而得到乙個視覺上的三角形.只是這次我們沒有用到css3的transform屬性，相容性更好一些。
◆◆◆◆
**如下：
amp;$lt;span class="icon2"$amp;>amp;$lt;/span$amp;>amp;$lt;/span>
標籤一標籤二標籤三標籤四
html**：
標籤一amp;$lt;/span$amp;>amp;$lt;/a> 標籤二amp;$lt;/span$amp;>amp;$lt;/a> 標籤三amp;$lt;/span$amp;>amp;$lt;/a> 標籤四amp;$lt;/span$amp;>amp;$lt;/a>
這裡我們要注意的是什麼呢？那就是箭頭是絕對定位的，小心箭頭過大的時候，將上面的文字覆蓋掉了。
用css製作三角形
用css製作三角形，主要是利用css元素給 盒模型 設定邊框得到的。上圖，上邊框和做邊框，以及上邊框和右邊框的交合處，瀏覽器會按照直角的二分之一處繪製交合線。這是 盒模型 有寬和高時候的效果。我們假設一下，如果把寬和高設定成0px，同時讓邊框的寬度更寬一點情況會怎樣那？css 如下 tip1效果圖如...
css製作三角形
div html css circle 結果 總結 在製做圓形之前，首先需要保證這個元素是正方形，即width height 其次border radius 1 2width即可 border radiusde 的預設基準點是幾何中心 下面即將步入我們今天所說的正題 css製作三角形 首選css製作...
css 製作三角形
1.寫乙個盒子，寬高必須為0 2.根據自己所要三角形的方向，乙個邊界設定顏色，顯示三角效果 3.其它3邊界設定相同顏色 一般設定白色 就顯得設定不同顏色的那一邊是個三角 div生成三角結果如下 可以看到生成的三角是等邊三角型，若我們向設定其它想要的三角形，就需要對三角形做一些強化修改，乙個場景如下 ...