为什么设置css的 border-color属性值可以画出三角形?

先来看几张图:

1.中间有width,无height

2.中间无width,有height

3.中间有width,也有height

4.即无 width,也无height

5. 中间无width,也无height,但是进行边框透明处理得到一个三角形

这些图使用css可以非常简单的实现的,你需要先了解以下的知识:

1. border-width:这个属性能够设置一个元素的四个边框的宽度.(顺时针设置,找对称)

border-width:10px ;(上右下左都是10px)

border-width:10px 20px 30px;(上:10px,左右:20px,下:30px)

border-width:10px 20px; (上下:10px,左右:20px)

border-width:10px 20px 30px 40px; (上:10px, 右:20px,下:30px ,左:40px)

2 . border-color(同样也是能够设置上下左右的边框颜色,顺序跟border-width的相同)

所以我们来看它的属性值:

a. color : 指定背景颜色

b. transparent : 指定是透明的

c. inherit : 指定边框的颜色,应该从父元素继承

注意,上边的图形其实是们所设置的过大的边框,但是没有内容(根据盒子模型,width和height是指内容的宽度和高度) , 最后才导致图形这样显示的,如果我们没有指定内容的width和height,那么相当于这个东西不是空心的,而是一个实体,并且, 由四个颜色平均占据这个实体的空间,一个实心正方体平均分成四份,从侧面看, 当然每一份就是呈现一个"三角形区域". 我们如果把其中的某一块透明处理,那么就会得到不同规则的图形,比如左上右透明处理,那么就会只剩 "下"这个区域,于是就是我们所看到的三角形了.

代码如下:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div {
                margin: 10px;
            }
            
            #mydiv1 {
                width: 50px;
                height: 0px;
                border-width: 100px;
                border-style: solid;
                border-color: bisque fuchsia red forestgreen;
            }
            
            #mydiv2 {
                width: 0px;
                height: 60px;
                border-width: 100px;
                border-style: solid;
                border-color: bisque fuchsia red forestgreen;
            }
            
            #mydiv3 {
                width: 50px;
                height: 50px;
                border-width: 100px;
                border-style: solid;
                border-color: bisque fuchsia red forestgreen;
            }
            
            #mydiv4 {
                width: 0px;
                height: 0px;
                border-width: 100px;
                border-style: solid;
                border-color: bisque fuchsia red forestgreen;
            }
            
            #mydiv5 {
                width: 0px;
                height: 0px;
                border-width: 100px;
                border-style: solid;
                border-color: transparent transparent red transparent;
            }
        </style>
    </head>

    <body>
        <p> 中间有width,无height</p>
        <div id="mydiv1">

        </div>
        <p> 中间无width,有height</p>
        <div id="mydiv2">

        </div>
        <p> 中间有width,也有height</p>
        <div id="mydiv3">

        </div>
        <p> 中间无width,无height</p>
        <div id="mydiv4">

        </div>
        <p> 中间无width,无height,但是进行边框透明处理 得到一个三角形</p>
        <div id="mydiv5">

        </div>
    </body>

</html>

为什么设置css的 border-color属性值可以画出三角形?

猜你喜欢