CSS 利用border三角形绘制方法

时间：2015-05-13 21:28:26 阅读：129 评论：0 收藏：0 [点我收藏+]

标签：

CSS 三角形绘制方法，这里面的transparent比较重要，有和没有影响很大；

原理：这个div是由4个三角形组成，每个三角对应一个border，隐藏其它3个border,就可以得到一个三角形。

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

/*border: 50px solid transparent 两种效果一样*/
border-bottom: 100px solid red;
}

上下左右的到简单，直接border-后面四个相互变，上面都是border: 50px solid transparent 即可

技术分享

复制代码代码如下:

#triangle-down {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 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-right {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-left: 100px solid red;
    border-bottom: 50px solid transparent;
}

技术分享

复制代码代码如下:

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

技术分享

复制代码代码如下:

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

技术分享

复制代码代码如下:

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

技术分享

复制代码代码如下:

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

CSS 利用border三角形绘制方法

标签：

原文地址：http://www.cnblogs.com/zhrn/p/4501602.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行