CSS3三角形实现原理

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

三角形8种分类

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

triangle up,triangle down,triangle left,triangle right,triangle top left,triangle top right,triangle bottom left和triangle bottom right

8种三角形实现实例

1.triangle up 上三角形

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

2.triangle down 下三角形

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

3.triangle left 左三角形

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

4.triangle right 右三角形

#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 左上三角形

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

6.triangle top right 右上三角形

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

7.triangle bottom left 左下三角形

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

8.triangle bottom right 右下三角形

#triangle-bottomright {
    width: 0;
    height: 0;
    border-bottom: 100px solid black;
    border-left: 100px solid transparent;
}
分类: 默认分类 标签: 暂无标签

评论

暂无评论数据

暂无评论数据

目录