如何用 CSS 实现三角形

你的名字 2022-12-01 11:59 162阅读 0赞

### 如何用 CSS 实现三角形 ###

*   *   *  1. 绘制一个拥有四种不同边框颜色的正方形
         *  2. 将正方形的宽度设为0，高度可以去掉
         *  3. 除了某个方向的三角，其他颜色全部设为透明
         *  4. 总结

### 1. 绘制一个拥有四种不同边框颜色的正方形 ###

代码

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <style>
        .border{ 
            width:50px;
            height: 50px;
            border-width: 50px;
            border-style: solid;
            border-color: red yellow blue green;
        }
    </style>
    <body>
    <div class="border"></div>
    </body>
    </html>

效果

![在这里插入图片描述][20200826223808331.png_pic_center]

### 2. 将正方形的宽度设为0，高度可以去掉 ###

备注：不能将宽度去掉，因为 div 为块级标签，去掉宽度值，会平铺整个区域。

代码

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <style>
        .border{ 
            border-width: 50px;
            border-style: solid;
            border-color: red yellow blue green;
        }
    </style>
    <body>
    <div class="border"></div>
    </body>
    </html>

效果

![在这里插入图片描述][20200826224500448.png_pic_center]

### 3. 除了某个方向的三角，其他颜色全部设为透明 ###

备注：四个方向的颜色设定分别为上右下左的顺序。

代码

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <style>
        .border{ 
            border-width: 50px;
            border-style: solid;
            border-color: red transparent transparent transparent;
        }
    </style>
    <body>
    <div class="border"></div>
    </body>
    </html>

效果

![在这里插入图片描述][20200826225826539.png_pic_center]

### 4. 总结 ###

4.1 去掉高度，宽度设为 0 ；  
4.2 border 宽度为三角高度；  
4.3 border 颜色留一边，其他全部透明色。

[20200826223808331.png_pic_center]: /images/20221123/0442f231b31643b5b5afebbf1afa12c6.png
[20200826224500448.png_pic_center]: /images/20221123/133e76fb143649afb5b38ff046cf1f90.png
[20200826225826539.png_pic_center]: /images/20221123/46c673fc905448fa9bdabcde9de6bd9c.png