使用CSS3画三角形

参考链接： 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;
}

FEATURED TAGS

FRIENDS