关于CSS三角形练习

我相信之前好多人面试都遇到过在规定时间内做一个三角形,这类面试题吧,那这里我们就讨论怎么用CSS来制作三角形。

第一种方法就是用border这个属性,和transparent这个属性结合使用

例如:
html代码:


CSS代码:

/*向上*/
.triangle_border_up{
    width:0;
    height:0;
    border-width:0 30px 30px;
    border-style:solid;
    border-color:transparent transparent #333;/*透明 透明  灰*/
    margin:40px auto;
    position:relative;
}
.triangle_border_up span{
    display:block;
    width:0;
    height:0;
    border-width:0 28px 28px;
    border-style:solid;
    border-color:transparent transparent #fc0;/*透明 透明  黄*/
    position:absolute;
    top:0px;
    left:0px;
}
/*向下*/
.triangle_border_down{
    width:0;
    height:0;
    border-width:30px 30px 0;
    border-style:solid;
    border-color:#333 transparent transparent;/*灰 透明 透明 */
    margin:40px auto;
    position:relative;
}
.triangle_border_down span{
    display:block;
    width:0;
    height:0;
    border-width:28px 28px 0;
    border-style:solid;
    border-color:#fc0 transparent transparent;/*黄 透明 透明 */
    position:absolute;
    top:0px;
    left:0px;
}
/*向左*/
.triangle_border_left{
    width:0;
    height:0;
    border-width:30px 30px 30px 0;
    border-style:solid;
    border-color:transparent #333 transparent transparent;/*透明 灰 透明 透明 */
    margin:40px auto;
    position:relative;
}
.triangle_border_left span{
    display:block;
    width:0;
    height:0;
    border-width:28px 28px 28px 0;
    border-style:solid;
    border-color:transparent #fc0 transparent transparent;/*透明 黄 透明 透明 */
    position:absolute;
    top:0px;
    left:0px;
}
/*向右*/
.triangle_border_right{
    width:0;
    height:0;
    border-width:30px 0 30px 30px;
    border-style:solid;
    border-color:transparent transparent transparent #333;/*透明 透明 透明 灰*/
    margin:40px auto;
    position:relative;
}
.triangle_border_right span{
    display:block;
    width:0;
    height:0;
    border-width:28px 0 28px 28px;
    border-style:solid;
    border-color:transparent transparent transparent #fc0;/*透明 透明 透明 黄*/
    position:absolute;
    top:0px;
    left:0px;
}

这样就是可以实现三角形。其实理解这些很简单,我们假设有一个方块,他的宽高都是0,只有边框有宽度。那么就会出现这种情况:


三角形原理.png

当我们设置透明的时候只有当前边是透明的如果透明和不透明的重合,那么会以45度角来分割,一半是透明一半是不透明这样就出现了三角形。

下面我们实现一个气泡效果:



    
        
        
        
    

    
        
三角形
关于CSS三角形练习_第1张图片
气泡展示.jpg

怎么样还是比较漂亮的吧。

你可能感兴趣的:(关于CSS三角形练习)