最近的乙個專案頁面中，有很多三角形icon，在不考慮ie相容性下，使用了css實現三角形，記錄一下**。
1、實心三角形，利用transparent實現
(1)設定線條寬50px，div 寬高0
.********{
width: 0px;
height: 0px;
border-right: 100px solid red;
border-left: 100px solid blue;
border-top:100px solid yellow;
border-bottom:100px solid green;
(2)當我們只想要乙個三角時，只需設定其他boder顏色透明即可。.********{
width: 0px;
height: 0px;
border: 100px solid transparent;
border-bottom:100px solid green;
(3)在(2)中我們生成的是乙個扁平三角形，可以設定線條的寬度，改變三角形的寬高.********{
width: 0px;
height: 0px;
border: 50px solid transparent;
border-bottom:100px solid green;
2、三角形：使用 transform 旋轉元素的角度， 在ie中相容性不好.********{
width: 10px;
height: 10px;
border-left: 1px solid black;
border-top: 1px solid black;
transform: rotate(45deg);
(2)使用偽類，使兩個三角疊加。注：若trianglle 的元素中有文字，可使用before和 after設定三角進行疊加哦
優點：可以修改三角的角度，.********{
width: 0px;
height: 0px;
border: 50px solid transparent;
border-bottom: 50px solid black;
.********::after{
content: '';
width: 0px;
height: 0px;
border: 49px solid transparent;
border-bottom: 49px solid white;
position: absolute; top: 2px; left: 1px;
css 修改三角形大小 CSS繪製三角形原理及應用
在從 psd 到 html 頁面的過程中，免不了要遇到乙個問題 這個小圖示，可以用 css 效果實現，也可以切圖下來，到底該怎麼選擇呢？在此我個人的選擇一般都是，用 css 實現，當然切圖然後實現也是聰明人的辦法，但是我覺得學好乙個技術最關鍵的不是學習，而是使用。學了不用都是假把式。學了 css 有...
css 修改三角形大小 css盒模型
標準盒模型中width指的是內容content的寬度，height指的是內容區域content的高度標準盒模型下盒子的大小 content border padding margin怪異盒模型中的width指的是內容 邊框 內邊距總的寬度 content border padding height指...
css三角形實現
我們的網頁因為 css 而呈現千變萬化的風格。這一看似簡單的樣式語言在使用中非常靈活，只要你發揮創意就能實現很多比人想象不到的效果。特別是隨著css3的廣泛使用，更多新奇的 css 作品湧現出來。up 1 2 3 4 5 6 7 up down 12 3 4 5 6 7 down left 12 3...