CSS畫三角形原理

2021-08-27 03:33:12 字數 771 閱讀 7277

先看一段**:

得出了如下圖形

其中border-style渲染邊框的顯示方式,border-width分別代表邊框的寬度,邊框的寬度是根據三角形的頂點到底邊的距離。

由上圖可知,要是想得到乙個正三角形的話,只要將其餘的三邊的顏色變成透明即可:如下

得到的結果如下

但是想要得到乙個直角三角形,怎麼辦呢?

我們的三角形的高度是根據border-width來確定的,三角形的底則是根據相鄰的兩邊的兩個三角形的寬度來確定的,也就是說,上圖中藍色的三角形的底部寬度是由左邊三角形border-left-width和右邊三角形border-right-width兩個相加來確定的;

那麼要是我們要做乙個直角三角形,則將一邊的寬度設定為0即可

這樣就可以得到乙個直角三角形了

css畫三角形

好久沒寫css了,練練手,剛看了下在以前公司做過的乙個 現在已經改版,裡面有個模組涉及到用css畫三角形,試著做了一下,分享出來。帳號 287019674 qq.com 密碼 123456 下面是對實現原理的分析 1 新建乙個元素,隨便什麼元素,不過我習慣性的會用塊元素來做。如果行內元素就displ...

CSS 畫三角形

使用 css 畫三角形?第一感覺不太可能。但那是對 border 有一點誤會。來看乙個示例 它的 html 如下 我們需要注意,邊框相接的地方,即相鄰邊框的樣式。因為我們平時使用邊框,一般只幾畫素寬,所以可以不注意它們相接的樣式,但當邊框達到50畫素寬,就可以清楚看到,它們在相接時是如何處理的 這是...

css畫三角形

解析 border width 100px 100px 100px 200px border color transparent transparent transparent eb1111 屬性值值說明 color 指定背景顏色。transparent 指定邊框的顏色應該是透明的。這是預設 inh...