資訊專欄INFORMATION COLUMN
摘要：說到這里，大家該明白了上面的三角形圖標(biāo)是怎么來的了吧元素沒有下邊框，而左右邊框又是透明的，相當(dāng)于只有上圖中的上面的黑色三角形部分。所以，如果我們要做倒立三角形向右的或者向左的三角形，只需要為三角形底部設(shè)置邊框，兩腰邊框透明即可。
原文 http://itindex.net/detail/487...三角形-圖標(biāo)
網(wǎng)頁中經(jīng)常有一種三角形的圖標(biāo)，鼠標(biāo)點一下會彈出一個下拉菜單之類的（之前淘寶也有，不過現(xiàn)在改版好像沒有了）
之前以為是個png圖標(biāo)背景，后來在bootstrap中看到有一個圖標(biāo)樣式叫做caret的用來實現(xiàn)這種效果。沒想到用CSS也能實現(xiàn)這個效果。
看了下源碼是這樣的：
.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;
}
研究一番之后，發(fā)現(xiàn)原理是這樣的：
首先，需要把元素的寬度、高度設(shè)為0。
然后設(shè)置邊框樣式。最關(guān)鍵的也在這里。
這里我們先做一個實驗，如果一個元素具有下列樣式：
{
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;
}
這會是什么效果呢？可能你不會想到：
這是為什么呢？我們打個比方，有四塊紅色和黑色的木板代表元素的四個邊框，把他們兩橫兩豎重疊起來，這時候他們在二維平面的投影便成了上面的效果。
說到這里，大家該明白了上面的三角形圖標(biāo)是怎么來的了吧：元素沒有下邊框，而左右邊框又是透明的，相當(dāng)于只有上圖中的上面的黑色三角形部分。
所以，如果我們要做倒立三角形、向右的、或者向左的三角形，只需要為三角形底部設(shè)置邊框，兩腰邊框透明即可。
例如：
{
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;
}
將得到如下效果：
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/111439.html
摘要：思路怎么用畫一個帶陰影的三角形呢有童鞋說這還不簡單嗎網(wǎng)上有很多解決方案但其實大多都是實現(xiàn)不太完美的存在一些問題假設(shè)我們做一個向下的三角形箭頭常見的方法大致有兩種通過邊框控制和設(shè)為透明設(shè)為預(yù)定的顏色即可通過旋轉(zhuǎn)盒子方法一可以畫三角形但是1. 思路 怎么用CSS3畫一個帶陰影的三角形呢 ? 有童鞋說, 這還不簡單嗎 網(wǎng)上有很多解決方案, 但其實大多都是實現(xiàn)不太完美的, 存在一些問題 假設(shè)我們做一...
摘要：那問題來了，如何用來畫三角形呢別著急，先來看看我所遇到過的三角形。如下圖，有實心三角形，空心的，還有可以歸為三角形的小箭頭。畫一個三角形，首先想到的是如何畫三角形的形狀，然后給一個背景顏色。 在設(shè)計稿中，經(jīng)常會出現(xiàn)好多三角形，如果將三角形變成圖片，通過img標(biāo)簽的src或者background中的url來訪問，從前端性能方面來看這并不好。那問題來了，如何用css來畫三角形呢？別著急，先...
摘要：寬度被設(shè)為的邊框?qū)?yīng)方向的邊框會形成較大的三角形，且長度加倍的采納的顯示其實也是用三角形實現(xiàn)的上部分是包含采納兩個字的塊狀元素，設(shè)置。 前端中的很多地方都會用到三角形，比如tooltip等CSS中創(chuàng)建三角形的方法很多，可以參考這里： CSS創(chuàng)建三角形（小三角）的幾種方法 比較簡單實用的還是使用border來創(chuàng)建三角形，今天主要研究這個的實現(xiàn)將邊框分別設(shè)置為紅/黃/藍(lán)/綠 .triang...
摘要：純畫三角原理解析因為之前做一個頁面出現(xiàn)了很多三角，開始直接用圖片感覺并不是很好用，看著總是怪怪的顏色還很難調(diào)整的跟背景一樣，就搜了一波代碼直接用上了，事后想了一下感覺不知道具體原理是什么，很奇怪為什么邊框能設(shè)置成三角的樣式。 純CSS畫三角原理解析 因為之前做一個頁面出現(xiàn)了很多三角，開始直接用圖片感覺并不是很好用，看著總是怪怪的顏色還很難調(diào)整的跟背景一樣，就搜了一波代碼直接用上了，事后...
摘要：三角形三個角分別是，此時畫五角星等價于畫三個三角形。所以理論上，通過控制一個三條的長度，進而實現(xiàn)不同大小的三角形是可行。實踐了一番，由于很難得到一個整數(shù)值，所以通過這種方法畫正五角形幾乎是無法實現(xiàn)的。 三角形 寫 css 的時候，用慣了背景圖，忽略了 css 本身其實可以實現(xiàn)很多簡單的基本圖形，比如三角形： .triangle { border-style: solid; ...
閱讀 1882·2021-11-25 09:43
閱讀 3177·2021-11-15 11:38
閱讀 2718·2019-08-30 13:04
閱讀 494·2019-08-29 11:07
閱讀 1508·2019-08-26 18:37
閱讀 2742·2019-08-26 14:07
閱讀 594·2019-08-26 13:52
閱讀 2289·2019-08-26 12:09
