CSS3三角形实现原理

在css3中，我们主要使用的是一个transparent的属性，意思是透明的，比如我们将字体设置为黑色会写color：black，那么如果想把字体的颜色设置为透明，我们可以写color：transparent。同理background-color：transparent可以设置背景为透明。

三角形9种分类

我们根据三角形的位置分为8种：

9种三角形实现实例

1.triangle up 上三角形

1 2 3 4 5 6 7

#triangle-up{ width:0; height:0; border-left:50px solid transparent; border-right:50px solid transparent; border-bottom:100px solid black; }

代码冒号存在问题，

2.triangle down 下三角形

1 2 3 4 5 6 7

#triangle-down{ width：0； height：0； border-left：50px solid transparent； border-right:50px solid transparent; border-top:100px solid black; }

3.triangle left 左三角形

1 2 3 4 5 6 7

#triangle-left{ width：0； height:0； border-top：50px solid transparent； border-bottom:50px solid transparent; border-right:100px solid black; }

4.triangle right 右三角形

1 2 3 4 5 6 7

#triangle-right{ width：0； height：0； border-top：50px solid transparent； border-bottom:50px solid transparent; border-left:100px solid black; }

5.triangle top left 左上三角形

1 2 3 4 5 6

#triangle-topleft{ width：0； height：0； border-top：100px solid black； border-right:100px solid transparent; }

6.triangle top right 右上三角形

1 2 3 4 5 6

#triangle-topright{ width：0； height：0； border-top：100px solid black； border-left：100px solid transparent； }

7.triangle bottom left 左下三角形

1 2 3 4 5 6

#triangle-bottomleft{ width：0； height：0； border-bottom：100px solid black； border-right：100px solid transparent； }

8.triangle bottom right 右下三角形

1 2 3 4 5 6

#triangle-bottomright{ width：0； height：0； border-bottom：100px solid black； border-left：100px solid transparent； }

 

9.triangle  直角三角形

1 2 3 4 5 6 7 8

#triangle { width: 0px; height: 0px; border-color: red blue blue red; border-width: 50px 50px 50px 50px; border-style: solid; }   }