画三角形 - Githubissues

goldEli commented 4 years ago

用纯css画一个三角形（附上代码）

FireDragonZL commented 4 years ago

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas绘制三角形</title>
</head>
<body>
    <canvas id="canvas" width="500px" height="500px"></canvas>

    <script>
        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext("2d");

        draw(100,100,200,200);

        /**
         * 绘制三角形的函数
         * (x,y)为起始点坐标，(line1,line2)为三角形的两个直角边长
         */
        function draw(x, y, line1, line2){
            // 新建一条path
            ctx.beginPath();
            // 将画笔移到指定位置
            ctx.moveTo(x, y);
            // 绘制一条从当前路径到坐标(200,200)的直线
            ctx.lineTo(x + line1, y);
            ctx.lineTo(x + line1, y + line2);
            // 闭合路径
            ctx.closePath();
            // 绘制路径
            ctx.stroke();
            // 填充闭合路径
            ctx.fill();
        }        
    </script>
</body>
</html>

goldEli commented 4 years ago

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas绘制三角形</title>
</head>
<body>
    <canvas id="canvas" width="500px" height="500px"></canvas>

    <script>
        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext("2d");

        draw(100,100,200,200);

        /**
         * 绘制三角形的函数
         * (x,y)为起始点坐标，(line1,line2)为三角形的两个直角边长
         */
        function draw(x, y, line1, line2){
            // 新建一条path
            ctx.beginPath();
            // 将画笔移到指定位置
            ctx.moveTo(x, y);
            // 绘制一条从当前路径到坐标(200,200)的直线
            ctx.lineTo(x + line1, y);
            ctx.lineTo(x + line1, y + line2);
            // 闭合路径
            ctx.closePath();
            // 绘制路径
            ctx.stroke();
            // 填充闭合路径
            ctx.fill();
        }        
    </script>
</body>
</html>

看题目，用css

FireDragonZL commented 4 years ago

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用CSS样式绘制三角形</title>
    <style>
        .root {
            width: 300px;
            height: 400px;
            background-color: darkgray;
            padding-left: 100px;
        }
        .child01 {
            border: 50px red dashed;
            width: 0px;
            height: 0px;
            border-color: red red darkgray darkgray;
        }
        .child02 {
            border: 50px transparent dashed;
            width: 0px;
            height: 0px;
            border-bottom: 80px red solid ;
        }
        .child03 {
            border: 50px transparent dashed;
            width: 0px;
            height: 0px;
            border-bottom: 90px red solid ;
            border-left: 0px;
        }
    </style>
</head>
<body>
    <div class="root">
        <div class="child01"></div>
        <div class="child02"></div>
        <div class="child03"></div>
    </div>
</body>
</html>

748580573 commented 4 years ago

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用CSS样式绘制三角形</title>
    <style>

        .div1{
            border: 100px  solid;
            border-color: green red black blue;
        }

    </style>
</head>
<body>
    <div style="width: 100px; height: 100px;">
        <div class="div1"></div>
    </div>
</body>
</html>

goldEli / Front-End-Training

画三角形 #33