CSS中元素的边框border的应用(制作梯形和三角形)

 要实现在页面上点击指定元素时，弹出一个信息提示框。因为本人对 CSS 的应用不太熟练，网上搜了一些实现的方式。在使用时，发现提示框的创建用到三角形的生成。本文记录如何使用 CSS 创建梯形和三角形。

    实现的原理是设置元素的边框 border 属性创建梯形和三角形。

    在生成三角形之前，我们可以看下面的2个例子。

    生成梯形例子：

    如果指定一个 div 的宽高相等，再单独设置每个边框的颜色和宽度（边框宽度相等），这时，我们可以发现div的四个方向上都是一个梯形，如下：

<style>
    /*设置div的宽高相等，四个border的颜色不同*/
    .box1 {
        width: 20px;
        height: 20px;
        border-top: 50px solid red;
        border-right: 50px solid green;
        border-bottom: 50px solid blue;
        border-left: 50px solid black;
    }
</style>
<div class="box1"></div>

    以上 CSS 代码效果如下:

    

    生成三角形例子：

    通过上面生成梯形的方式，我们可以将 div 的宽高属性都设置为 0，这时中间的内容区将消失，div的四个边框 border 将形成四个三角形，如下：   

<style>
    /*设置div的宽高都为 0，四个border的颜色不同*/
    .box1 {
        width: 0px;
        height: 0px;
        border-top: 50px solid red;
        border-right: 50px solid green;
        border-bottom: 50px solid blue;
        border-left: 50px solid black;
    }
</style>
<div class="box1"></div>

    以上 CSS 代码效果如下:

    

    通过以上2个例子的设置，我们可以想到，对于四个方向上的border，当我们将其他三个方向上的border透明设为透明时，一个梯形或三角形就出来了。

    1. 制作单个梯形：   

<style>
    /*设置div的宽高相等，其他三边的border颜色透明*/
    div {
        float: left;
    }

    .box1 {
        width: 20px;
        height: 20px;
        border-top: 50px solid red;
        border-right: 50px solid transparent;
        border-bottom: 50px solid transparent;
        border-left: 50px solid transparent;
    }

    .box2 {
        width: 20px;
        height: 20px;
        border-top: 50px solid transparent;
        border-right: 50px solid green;
        border-bottom: 50px solid transparent;
        border-left: 50px solid transparent;
    }

    .box3 {
        width: 20px;
        height: 20px;
        border-top: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 50px solid blue;
        border-left: 50px solid transparent;
    }

    .box4 {
        width: 20px;
        height: 20px;
        border-top: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 50px solid transparent;
        border-left: 50px solid black;
    }
</style>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>

    以上CSS代码效果如下（为方便查看，将4个梯形放置到一行显示）：

    

    1. 制作单个三角形：   

<style>
    /*设置div的宽高为0，其他三边的border颜色透明*/
    div {
        float: left;
    }

    .box1 {
        width: 0px;
        height: 0px;
        border-top: 50px solid red;
        border-right: 50px solid transparent;
        border-bottom: 50px solid transparent;
        border-left: 50px solid transparent;
    }

    .box2 {
        width: 0px;
        height: 0px;
        border-top: 50px solid transparent;
        border-right: 50px solid green;
        border-bottom: 50px solid transparent;
        border-left: 50px solid transparent;
    }

    .box3 {
        width: 0px;
        height: 0px;
        border-top: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 50px solid blue;
        border-left: 50px solid transparent;
    }

    .box4 {
        width: 0px;
        height: 0px;
        border-top: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 50px solid transparent;
        border-left: 50px solid black;
    }
</style>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>

   以上CSS代码效果如下（为方便查看，将4个三角形放置到一行显示）：

     

    通过以上代码展示，可以看出，要实现梯形或三角形，只需要设置元素（一般用div）的border为对应的属性即可。