1樓：大魚
30 個案例教你用純 CSS 實現常見的幾何圖形碼道人
2樓：劉穎
CSS還是蠻強大的，對於三角形這個在網頁上不規則的形狀，很多前端小朋友們直接切圖了，這樣的做法可謂是偷懶啦，下面咱們就體驗下純CSS是實現的三角形吧。各種角度，帶你嘗試下。
其實三角的實現就是用border來做的。
下面是步驟分析：
1、首先來看看給乙個元素新增不同顏色的邊框吧
說明：我們來看四條邊框相交的角，這幾條邊框相交線並不是直角，而是乙個傾斜的狀態，其實這就是我們三角形形成的乙個方法；繼續往下看哦。
2、我們嘗試著把乙個元素的寬高設定為0；然後在新增上邊框試試看效果。
說明：我們在盒模型中知道，邊框始終是長在元素寬高之外的，很明顯上圖的效果就是用邊框撐開的乙個矩形，並且我們把注意點放在四條邊框交匯的地方，不難發現其中的道理。
3、然後開始實現三角形了：
說明：transparent屬性值代替之前的顏色值，當前的顏色為透明，這樣就能寫出下圖的效果。（這是關鍵的一部）。
4、最後對應著想要實現那個方向的「三角形」就新增transparent屬性值就OK了。例：
3樓：華不二
@Vkki 原理寫的不要太好，看著半小時不用就弄懂了細節，自己折騰了各種形狀，給同事炫耀下。同事默默扔給我乙個鏈結 http://
cssicon.space/#
/ 腦洞突放，不過原理都差不多，參考對比看看和自己想法有何不同，有價值！
4樓：一粒塵埃
看了 Vkki，FE的答案，就我的理解，做了一張原理圖，有點醜將就看著哈。。
5樓：
找到乙個生動的 ( σ'ω')σ http://
codepen.io/chriscoyier/
pen/lotjh
6樓：
一不小心看成了如何cos三角型。。。
7樓：
8樓：一條鹹魚
希望你了解下icon font
9樓：賀師俊
baixing/BXT · GitHub 正好今天BXT的第一期 @CSS魔法 的演講裡就包含這個部分的內容，在上海的同學可以到現場去聽。
10樓：Arise
終於看到乙個我會的，然而別人答的太好了…
11樓：李鵬飛
樓上基本已經把css畫三角形的思路講解清楚了,我這裡來歪個樓用css畫其他有趣圖形(乙個國外腦洞大開的FEblog)圖有點大
完整版本==>The Shapes of CSS
12樓：
@Vkki 的回答已經比較詳細，我這裡就用圖講解下分解動作好了，算是班門弄斧了。
首先我們來看下乙個標準的 box model 的 border 是怎樣的：
每部分的border，只有乙個小梯形，以 border-left 為例，所佔的部分由兩條對角線（部分），以及上下底組成。空白的中間部分由 content 和 padding 組成。接著往下看（這裡我們預設 padding 都為 0px），如果我們把 width 設定為 0px 之後，這個 box model會有怎樣的變化：
你會發現，怎麼 border-top 和 border-bottom 已經變成乙個三角形啦，然後接著把 height 設定為 0px呢？
現在這個圖形就有點像 @wangxf 同學演示的了。
css 畫三角形的原理就是上面講到的，所做就是需要設定 width: 0px; height: 0px，然後設定諸如合理 border-(left|top|bottom|right)-width 以及對應的顏色，然後再把你想要隱藏的隱藏就行了，題主可以試著想一下，如果沒有 border-top 或者 border-bottom 或者 border-left 或者 border-right （設定相應的 width 為 0px），上面的圖形會接著怎麼改變，可以到這裡來嘗試一下 Edit fiddle - JSFiddle，還可以想下如果同時沒有 border-top 和 border-bottom 會是怎麼樣的。
13樓：
樓上的回答已經非常詳細了，一般這樣的方法會用在對話方塊的那個小箭頭那裡。
但是因為這種方法只能畫出直角等腰三角形，而題主也並沒有說是否需要其他型別的三角形。
所以我在之前的基礎上給出多一些選擇。
# 先多謝之前知友的回答 ヾ (o ° ω ° O ) ノ【直角等腰三角形】
建立乙個沒有高和寬，只有border的div。
如圖：div
【銳角三角形】
這裡的主要思想是在div的基礎上加入2D偏轉，也就是 transform屬性的shewX()方法。
如圖：div
【鈍角三角形】
這裡的主要思想是3D變化，也就是transform屬性的rotate()方法。
如圖：div
或者我們仍然可以活用skewX()方法：
div那麼題主可以想一想這個三角形該如何變換？
14樓：
首先來乙個div
然後對div設定樣式
div得出乙個圖形
然後根據你的需要高就是border-top,border-bottom，寬就是border-left,border-right，根據你的形狀自由組合，設定border的顏色為transparent就行了
15樓：
這是乙個普通的 div ，乙個邊長為 100px 的正方形，border 寬度為 10px， 沒有任何技術含量，地球人都會畫。
我們知道 border 是分為 top、right、bottom、left 的，那麼這個矩形的四個邊是怎樣劃分的呢？
顯然，要想公平地分割四條邊框，只有這樣：
所以我們如果把上、左、右三條邊隱藏掉（顏色設為 transparent），會怎樣呢？
吶，這就是個梯形了！感覺離革命勝利很近了是不是！
仔細觀察一下這個梯形，和三角形有神馬區別呢？
對！上面多了一條邊！
上面這條邊有什麼特點呢？
它的長度剛好等於div 的寬度！
所以我們要把這個 div 的寬度縮小！
多小合適呢？
當然是 0 啦！
三角形粗來了！！！！！！！
好像太小了點，怎麼把它放大捏？
很簡單，我們把 border 的寬度擴大，
怎麼擴大呢？
顯然這條底邊和上邊已經沒什麼關係了，
上邊唯一的作用就是影響三角形頂點到 div 上邊緣的距離。
所以我們只需要擴大左、下、右這三條邊。
下邊的 width 控制了三角形的高（150px）
左右兩邊的 width 分別控制了三角形的底邊長的兩部分（加起來共 200px）
再舉個例子，如果把右邊 width 設為 0
誰能詳細講一下jowo bock 以及施密特筆尖
Emmanuel泓鈺 說實話，我個人最認可的是Bock代工的筆尖，例如給百利金代工的m200 5的筆尖或者說給kaweco短鋼的筆尖。bock的筆尖銥粒打磨風格是上下打平兩側隨著筆尖腰線收尖，筆尖打磨寫感確實很好，不過就是貴。怎麼說呢，如果是拿來做玩具或者平常用一用是可以的，但是要長期高強度使用，建...
德語中，四個格到底是什麼呢，有誰能詳細講一下啊？
容成春長 一看題主你這個問題，我的腦海裡立馬蹦出來靜三動四 剛好分享一下我之前優優德語上課時劉倩怡老師有講過靜三動四的方位介詞 在學習方位介詞時，我們最熟悉的概念莫過於靜三動四了。三和四表示的是介詞後面名詞或代詞的格。哪些介詞是靜三動四的呢？分三個方向，每個方向三個詞，一共九個，其實很好記 ber ...
誰能給我詳細的講一下雅思的平行閱讀法？
蘇心 首先，應明確雅思閱讀的順序性 所謂順序性是指題目答案的在文章中出現的先後順序 大題之間是無序的，而一類題中的幾個小題之間是有序的 例如 一篇文章中有三種題型，第一種是選擇 1 3 第二種是T F NG 4 7 第三種是summary 8 11 按照以上的規律則表明，第一種題型之中即1 3題是有...