优雅的画一个三角形-优快云博客

本文链接：https://blog.youkuaiyun.com/User_Name9999/article/details/128372596

一、利用边框border

1.1 普通三角形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TEST</title>
    <style>
        .box{
            width:0;
            height: 0;
            border: 20px solid rgb(228, 13, 128);
            border-top-color: transparent;
            border-right-color: transparent; 
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

如图：

1.2 伪元素三角形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TEST</title>
    <style>
        .box{
            width:300px;
            height: 40px;
            background-color:pink; 
            position: relative;
        }
        .box::after{
            position: absolute;
            right: -40px;
            content:"";
            border: 20px solid red;
            border-top-color: transparent;
            border-right-color: transparent;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

如图：

二、 clip-path属性

clip-path属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。

其中polygon() 值用于定义一个多边形。语法：polygon( <fill-rule>, [ <length-percentage> <length-percentage> ] )

<fill-rule>参数可选，表示填充规则用来确定该多边形的内部。后面的每对参数表示多边形的顶点坐标（X,Y），也就是连接点。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TEST</title>
    <style>
        .box{
            width:40px;
            height: 40px;
            background-color: red;
            clip-path: polygon(0 0,100% 100%,0 100%);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

如图：

三、canvas画布

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TEST</title>
    <style>
    </style>
</head>
<body>
    <canvas id="myCanvas" width="40" height="40"></canvas>
</body>
<script>
    const canvas = document.querySelector("#myCanvas") //获取画布
    const context = canvas.getContext('2d') //准备画笔（获取上下文对象）
    context.beginPath() //开始画
    context.moveTo(0,0) //规定起始点
    context.lineTo(0,40)
    context.lineTo(40,40)
    context.closePath() //闭合路径
    context.fillStyle = "pink" //填充色
    context.fill() //填充  
</script>
</html>

如图：