使用border做三角形

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

1

doctype html
>
2<
html 
lang
="en"
>
3<
head
>
4<
meta 
charset
="utf-8"
>
5<
title
>document
title
>
6<
style
>
7.t0
1617
.t126
27.t2
3637
.t346
47.t4
5657
style
>
58head
>
59<
body
>
6061
<
div 
class
="t0"
>
div>
6263
64<
div 
class
="t1"
>
div>
6566
67<
div 
class
="t2"
>
div>
6869
70<
div 
class
="t3"
>
div>
7172
73<
div 
class
="t4"
>
div>
74body
>
75html
>

修改border邊框的四條邊，都會有不一樣的顯示，上面**對應的一下的截圖

對的，我使用的就是最後一種，下拉框的那個標誌。從此切圖時不用切乙個小圖出來，用純css實現。方便不少哈~

只需要設定border的三個方向就可以確定三角形。看截圖的第二個。這裡設定了border的四個方向，border-top、border-right、border-bottom、border-left。

當需要下拉的三角形就直接寫top，left，right，並且左右兩邊不需要顯示就用transparent就o了。

height: 0;

width: 0;
border-top:solid 100px red;
border-left:solid 100px transparent;
border-right:solid 100px transparent;

使用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 ...