纯css玩转三角形

当前位置 : 首页 > 网页制作 > CSS > 纯css玩转三角形

纯css玩转三角形

来源: 作者: 时间:2016-01-20 09:22
如今css3盛行的时代,用canvas,svg以及linear-gradient,radio-gradient都能画出各种各样的图形。但是早在css2时代,画三角形就不是什么新鲜事。这里简单总结一下,也方便自己查阅。写出通

如今css3盛行的时代,用canvas,svg以及linear-gradient,radio-gradient都能画出各种各样的图形。

但是早在css2时代,画三角形就不是什么新鲜事。这里简单总结一下,也方便自己查阅。


 

写出通用结构,

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

如果这样写样式的话,由于没有设置border-right 会导致三角形的尖角指向右方。这个发挥一下空间想象力,纸上画一下就知道了。

如果要三角尖朝上只需不设置border-top即可。

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

同理:
三角减朝左:

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

三角减朝下:

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

当然如果我把border-top设置100px 红色 ,border-left设置为100px 透明的话 会得到一个折角的效果:

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

}

这样又是可以设置四个方向的。原理都一样。
 

Tag:
网友评论

<