CSS3绘制三角形

作者: 漆家洲 分类: CSS3,建站知识 发布时间: 2015-07-26 17:35

最近三角形挺火,很多地方都能碰到,如网页,微信,或者QQ空间的时间轴等地方都能看到,而且这些并不是图片插入进去的,那就需要用CSS来做了,于是就学习了下,现在讲学习的代码贴出来,供大家一起学习。

这里实现四个(分别是上下左右四个三角形),做四个div,代码如下:

<div class="triangle-up">
     <!--向上的三角-->
</div>
<div class="triangle-down">
    <!--向下的三角-->
</div>
<div class="triangle-left">
    <!--向左的三角-->
</div>
<div class="triangle-right">
    <!--向右的三角-->
</div>

下面用CSS3分别实现向上、下、左、右的三角形

/*箭头向上*/
.triangle-up {
    width:0; 
    height:0; 
    border-left:30px solid transparent;
    border-right:30px solid transparent;
    border-bottom:30px solid #fff;
}
或者
.triangle-up {
    width:0;
    height:0;
    border:30px solid transparent;
    border-bottom-color:#fff; 
}
/*箭头向下*/ 
.triangle-down {
    width:0; 
    height:0; 
    border-left:20px solid transparent;
    border-right:20px solid transparent; 
    border-top:20px solid #0066cc; 
} 
/*箭头向左*/
 .triangle-left {
    width:0; 
    height:0;
    border-top:30px solid transparent; 
    border-bottom:30px solid transparent;
    border-right:30px solid yellow; 
} 
/*箭头向右*/ 
.triangle-right {
    width:0; 
    height:0; 
    border-top:50px solid transparent;
    border-bottom: 50px solid transparent;
    border-left: 50px solid green; 
}

最后附上效果图
CSS3绘制三角形
源码下载:http://pan.baidu.com/s/1ExBS6

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!