使用CSS畫三角形

lifesimple 發布于2019-08-29 11:07 / 489人閱讀

摘要：說到這里，大家該明白了上面的三角形圖標是怎么來的了吧元素沒有下邊框，而左右邊框又是透明的，相當于只有上圖中的上面的黑色三角形部分。所以，如果我們要做倒立三角形向右的或者向左的三角形，只需要為三角形底部設置邊框，兩腰邊框透明即可。

原文 http://itindex.net/detail/487...三角形-圖標

網頁中經常有一種三角形的圖標，鼠標點一下會彈出一個下拉菜單之類的（之前淘寶也有，不過現在改版好像沒有了）

之前以為是個png圖標背景，后來在bootstrap中看到有一個圖標樣式叫做caret的用來實現這種效果。沒想到用CSS也能實現這個效果。

看了下源碼是這樣的：

.caret {
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-top: 4px solid;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}

研究一番之后，發現原理是這樣的：

首先，需要把元素的寬度、高度設為0。

然后設置邊框樣式。最關鍵的也在這里。

這里我們先做一個實驗，如果一個元素具有下列樣式：

{
width: 0;
height: 0;
border: 4px solid;
}

效果是什么？沒錯是個正方形：

因為元素寬度、高度都為0，只有4px的邊框，于是變成了上面的效果。

再來，我們把樣式改成下面這樣：

{
width: 0;
height: 0;
border-top: 40px solid #000;
border-right: 40px solid #ff0000;
border-left: 40px solid #ff0000;
border-bottom: 40px solid #000;
}

這會是什么效果呢？可能你不會想到：

這是為什么呢？我們打個比方，有四塊紅色和黑色的木板代表元素的四個邊框，把他們兩橫兩豎重疊起來，這時候他們在二維平面的投影便成了上面的效果。

說到這里，大家該明白了上面的三角形圖標是怎么來的了吧：元素沒有下邊框，而左右邊框又是透明的，相當于只有上圖中的上面的黑色三角形部分。

所以，如果我們要做倒立三角形、向右的、或者向左的三角形，只需要為三角形底部設置邊框，兩腰邊框透明即可。

例如：

{
width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid #ff0000;
border-bottom: 40px solid transparent;
}

另外，如果我們把樣式改成這樣：

{
width: 0;
height: 0;
border-top: 40px solid #000;
border-right: 30px solid #ff0000;
border-left: 50px solid #ff0000;
border-bottom: 25px solid #000;
}

將得到如下效果：

云服務器 GPU云服務器畫三角形 html畫三角箭頭 css三角形 css三角

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111439.html

用CSS畫一個帶陰影的三角形的示例代碼

摘要：思路怎么用畫一個帶陰影的三角形呢有童鞋說這還不簡單嗎網上有很多解決方案但其實大多都是實現不太完美的存在一些問題假設我們做一個向下的三角形箭頭常見的方法大致有兩種通過邊框控制和設為透明設為預定的顏色即可通過旋轉盒子方法一可以畫三角形但是1. 思路怎么用CSS3畫一個帶陰影的三角形呢 ? 有童鞋說, 這還不簡單嗎網上有很多解決方案, 但其實大多都是實現不太完美的, 存在一些問題假設我們做一...

chunquedong 2019-04-23 11:43 評論0 收藏0
如何用css畫三角形

摘要：那問題來了，如何用來畫三角形呢別著急，先來看看我所遇到過的三角形。如下圖，有實心三角形，空心的，還有可以歸為三角形的小箭頭。畫一個三角形，首先想到的是如何畫三角形的形狀，然后給一個背景顏色。在設計稿中，經常會出現好多三角形，如果將三角形變成圖片，通過img標簽的src或者background中的url來訪問，從前端性能方面來看這并不好。那問題來了，如何用css來畫三角形呢？別著急，先...

Yuqi 2019-08-30 13:06 評論0 收藏0
css使用border畫三角形

摘要：寬度被設為的邊框對應方向的邊框會形成較大的三角形，且長度加倍的采納的顯示其實也是用三角形實現的上部分是包含采納兩個字的塊狀元素，設置。前端中的很多地方都會用到三角形，比如tooltip等CSS中創建三角形的方法很多，可以參考這里： CSS創建三角形（小三角）的幾種方法比較簡單實用的還是使用border來創建三角形，今天主要研究這個的實現將邊框分別設置為紅/黃/藍/綠 .triang...

張紅新 2019-08-28 18:20 評論0 收藏0
純CSS畫三角原理解析

摘要：純畫三角原理解析因為之前做一個頁面出現了很多三角，開始直接用圖片感覺并不是很好用，看著總是怪怪的顏色還很難調整的跟背景一樣，就搜了一波代碼直接用上了，事后想了一下感覺不知道具體原理是什么，很奇怪為什么邊框能設置成三角的樣式。純CSS畫三角原理解析因為之前做一個頁面出現了很多三角，開始直接用圖片感覺并不是很好用，看著總是怪怪的顏色還很難調整的跟背景一樣，就搜了一波代碼直接用上了，事后...

lidashuang 2019-08-30 14:03 評論0 收藏0
css 實現各種基本圖形

摘要：三角形三個角分別是，此時畫五角星等價于畫三個三角形。所以理論上，通過控制一個三條的長度，進而實現不同大小的三角形是可行。實踐了一番，由于很難得到一個整數值，所以通過這種方法畫正五角形幾乎是無法實現的。三角形寫 css 的時候，用慣了背景圖，忽略了 css 本身其實可以實現很多簡單的基本圖形，比如三角形： .triangle { border-style: solid; ...

Elle 2019-08-30 13:21 評論0 收藏0