用css制作三角形，理解

标签：class   实现   link   lan   https   bsp   blank   pst   div   

如果真的很难理解的话，就在纸上画那些边框，就容易懂了

1、当如下设置代码并赋给div相应的属性时：

#sider2{

    width: 100px;

    height: 100px;

    border-top: 30px solid #000;

    border-right: 30px solid #ff0000;

    border-left: 30px solid #00ff00;

    border-bottom: 30px solid #0000ff;

}

会得到如下的一张图：

2、接着当不设置border-bottom，即默认其为0时，可以得到下面的图片；

3、然后当设置其width为0时，如下图：

4、继续设置其height为0；

5、最后假若你把border-left,border-right设置为透明之后，就可以看到如下的三角形了。

6、这就是设置一个基本的三角形所需要的代码，效果也看起来很直观。

7、还有假如是想实现一个直角三角形，则最后需要两个border边的配合使用，浏览器会自动进行一些“拉伸变换”后就可以得到一个直角三角形。

#triangle-topleft {

    width: 0;

    height: 0;

    border-top: 100px solid red;

    border-right: 100px solid transparent;

}

用css制作三角形，理解

标签：class   实现   link   lan   https   bsp   blank   pst   div   

原文地址：http://www.cnblogs.com/summer-work/p/6217272.html