css实现三角形&多边梯形

css可以实现各种各样的三角形,减少了切图加载图片,以下是各种三角形的实现方法。

1.首先设置一个盒子的三边为不同的颜色,看下边框是怎么显示的。







效果如图

可以看出每个边都是一个梯形

2.设置盒子的宽和高为0

#test{
    width:0px;
    height:0px;
    border-width:20px;
    border-style:solid;
    border-color:#e66161 #f3bb5b #94e24f #85bfda;
}

这里写图片描述

当盒子的宽和高都是0时,边框显示为三角形。由此可以看出,如何实现各种三角形。如果想实现倒三角,则其他的边为transparent,只设置最上面的边有颜色,则可以实现倒三角,同理可以实现各种三角形。

3.各种三角形的实现

(1)倒三角的实现

#test{
    width:0px;
    height:0px;
    border-width:20px;
    border-style:solid;
    border-color:green transparent transparent transparent;
}


这里写图片描述

(2)向上三角的实现(只需要保留下面的边)

#test{
    width:0px;
    height:0px;
    border-width:20px;
    border-style:solid;
    border-color:transparent transparent green transparent;
}

这里写图片描述

(3)向右三角的实现(保留左面的边)

#test{
    width:0px;
    height:0px;
    border-width:20px;
    border-style:solid;
    border-color:transparent transparent  transparent green;
}


这里写图片描述

(4)向左三角的实现(保留右面的边)

#test{
    width:0px;
    height:0px;
    border-width:20px;
    border-style:solid;
    border-color:transparent green transparent  transparent ;
}


这里写图片描述
(5)保留上边和右边组成三角形

#test{
    width:0px;
    height:0px;
    border-width:20px;
    border-style:solid;
    border-color:green green transparent  transparent ;
}


这里写图片描述
(6)

#test{
    width:0px;
    height:0px;
    border-left: 150px solid green;
    border-right: 150px solid green;
    border-bottom: 50px solid gray;
}


这里写图片描述
由于没有上边,所以左右的三角形都变成一半,只显示了下边部分。若只设置左右不设置上下,则左右的边无法显示。

————————————————
版权声明:本文为CSDN博主「刘小妞」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/liuwengai/article/details/55222906

你可能感兴趣的:(css实现三角形&多边梯形)