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 代码效果如下:

    1-200H11K910124.png

    生成三角形例子:

    通过上面生成梯形的方式,我们可以将 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 代码效果如下:

    1-200H11P330235.png

    通过以上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-200H11Q139206.png

    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个三角形放置到一行显示):

     1-200H11Q334204.png

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

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页