使用border做三角形

2022-08-22 00:30:16 字數 596 閱讀 7520

**上經常會使用一些三角形，除了的方式，實際上利用border我們可以做出純css的三角形。我們知道border是個邊抖可以單獨設定，當四個邊相交的時候他們是什麼時候改變的？

.t0
通過demo可以看到border的相交的地方在45deg平分，當元素的width、和height屬性唄設定為0的時候

.t1
這樣我們就可以看到三角形了，嘗試一下去掉兩個邊框，值保留上邊和左邊

.t2
這時候做三角形好像簡單了，只要我們保留兩個相鄰邊，把另外的乙個設定為透明就可以了

.t3
這樣我們就有乙個直角三角形了，稍微修改一下

.t4
這樣做等腰直角三角形也簡單了，保留相鄰的三個邊，兩個設定為透明就行了

.t5
再稍微調整一下，還可以做出各種形狀

.t6
.t7
.t8

使用border做三角形

上經常會使用一些三角形，除了的方式，實際上利用border我們可以做出純css的三角形。我們知道border是個邊抖可以單獨設定，當四個邊相交的時候他們是什麼時候改變的？t0 通過demo可以看到border的相交的地方在45deg平分，當元素的width 和height屬性唄設定為0的時候 t1 ...

使用border做三角形

上經常會使用一些三角形，除了的方式，實際上利用border我們可以做出純css的三角形。我們知道border是個邊抖可以單獨設定，當四個邊相交的時候他們是什麼時候改變的？t0 通過demo可以看到border的相交的地方在45deg平分，當元素的width 和height屬性唄設定為0的時候 t1 ...

使用border做三角形

上經常會使用一些三角形，除了的方式，實際上利用border我們可以做出純css的三角形。我們知道border是個邊抖可以單獨設定，當四個邊相交的時候他們是什麼時候改變的？t0 通過demo可以看到border的相交的地方在45deg平分，當元素的width 和height屬性唄設定為0的時候 t1 ...