用css畫三角形
一、原理
授人以魚不如授人以漁。各種方法只有掌握了原理才能真正理解，自己才能夠靈活的運用。
其實畫三角形和梯形很簡單。主要涉及到的屬性就是border邊框屬性
先給大家看一下在html中邊框的表現形式
div{
height: 200px;
width: 200px;
border-top: 30px solid red;
border-right: 30px solid blue;
border-bottom: 30px solid green;
border-left: 30px solid purple;
由上圖知邊框原來是四個梯形組成的。理解這一點下面畫三角形和梯形就簡單了
二、畫梯形
知道原理那麼畫梯形就簡單了
直接將其餘三個邊框顏色設定為透明就可以了(為了方便使用，可直接將div的寬或者高設定為0)
div{
height: 200px;
width: 200px;
border-bottom: 30px solid green;
border-left: 30px solid purple;
border-top: 30px solid transparent;
從上圖可以看到，寫了(上下左)三個邊框，上邊框設定透明。左邊的邊框就是個等腰梯形，下邊框變成了直角梯形。
需要注意的是，只有兩個邊框相接觸的地方才會顯示乙個斜邊(參考上圖左下角和左上角)，如果只有單獨乙個邊框，沒有相鄰邊框，則會顯示矩形(參考上圖右下角)。
這樣我們就可以畫出角度為45度的等腰梯形了。
如果想要畫不同角度的梯形，直接改變邊框的寬度即可(根據需要組合出自己想要的角度)
div{
height: 200px;
width: 200px;
border-top: 20px solid red;
border-right: 40px solid blue;
border-bottom: 60px solid green;
border-left: 80px solid purple;
三、畫三角形
上面畫梯形我們知道，將div寬高其中一項設定為0可以得到矩形，如果將div寬高全都設定為0則可以畫出三角形
div{
height: 0px;
width: 0px;
border-top: 100px solid red;
border-right: 100px solid blue;
border-bottom: 100px solid green;
border-left: 100px solid purple;
通過隱藏其餘邊框和設定邊框屬性則可以得到多種三角形
等腰三角形
div{
height: 0px;
width: 0px;
border-top: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 100px solid green;
border-left: 100px solid transparent;
傾斜三角形
div{
height: 0px;
width: 0px;
border-top: 100px solid transparent;
border-right: 200px solid transparent;
border-bottom: 100px solid green;
border-left: 100px solid transparent;
左上三角形
div{
height: 0px;
width: 0px;
border-top: 100px solid red;
border-right: 100px solid transparent;
border-bottom: 100px solid transparent;
border-left: 100px solid red;
兩個組合三角形
div{
height: 0px;
width: 0px;
border-top: 100px solid transparent;
border-right: 100px solid red;
border-bottom: none;
border-left: 100px solid red;
前端怎麼畫三角形 如何用CSS畫三角形
1.前言 在博主某次前端面試過程中，被問到如何用css畫乙個三角形？相信很多朋友在面試中也被問到過這個問題，並且網上針對這個問題也有非常多的解決方案，大部分都是採用border來實現，經過我一番搜尋，發現講具體實現的 的很多，但是講實現原理的幾乎沒有 也可能是我沒有找到 下面，我就談談利用borde...
前端怎麼畫三角形 用css如何畫出乙個三角形？
css還是蠻強大的，對於三角形這個在網頁上不規則的形狀，很多前端小朋友們直接切圖了，這樣的做法可謂是偷懶啦，下面咱們就體驗下純css是實現的三角形吧。各種角度，帶你嘗試下。其實三角的實現就是用border來做的。下面是步驟分析 1 首先來看看給乙個元素新增不同顏色的邊框吧 說明 我們來看四條邊框相交...
css畫三角形
好久沒寫css了，練練手，剛看了下在以前公司做過的乙個 現在已經改版，裡面有個模組涉及到用css畫三角形，試著做了一下，分享出來。帳號 287019674 qq.com 密碼 123456 下面是對實現原理的分析 1 新建乙個元素，隨便什麼元素，不過我習慣性的會用塊元素來做。如果行內元素就displ...