使用CSS3画三角形

Posted by 竹林品雨 on November 21, 2013

参考链接: http://www.cnblogs.com/lhb25/p/css-and-css3-triangle.html

####向上

 

#####CSS Code:

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

####向下

 

#####CSS Code:

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

####向左

 

#####CSS Code:

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

####向右

 

#####CSS Code:

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

####向左上 #####CSS Code:

 
#triangle-top-left{
    width: 0;
    height: 0;
    border-left: 100px solid red;
    border-bottom: 100px solid transparent;
}

####向左下

 

#####CSS Code:

#triangle-bottom-left{
    width: 0;
    height: 0;
    border-left: 100px solid red;
    border-top: 100px solid transparent;
}

####向右上

 

#####CSS Code:

#triangle-top-right{
    width: 0;
    height: 0;
    border-right: 100px solid red;
    border-bottom: 100px solid transparent;
}

####向右下

 

#####CSS Code:

  
#triangle-bottom-right{
    width: 0;
    height: 0;
    border-right: 100px solid red;
    border-top: 100px solid transparent;
}