This is the 21st day of my participation in the August Text Challenge.More challenges in August

When writing pages, we will encounter some scenes, such as this triangle (of course, this is the icon).

There are some jingdong Taobao drop-down box will use this very small triangle, so let’s see what can be done to achieve this small triangle

1. Pure CSS implementation

  • The principle of

We can use the CSS border property to draw a triangle. When an element has no content, its border looks like this

     body{
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        div{
            height: 200px;
            width: 200px;
            border-top: 30px solid red;
            border-right: 30px solid blue;
            border-bottom: 30px solid green;
            border-left: 30px solid purple;
        }
Copy the code

When we set the width and height of the div to 0, we have four triangles

So if we make three of them transparent, then we have a little triangle

     body{
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        div{
            height: 200px;
            width: 200px;
            border-top: 30px solid red;
            border-right: 30px solid transparent;
            border-bottom: 30px solid transparent;
            border-left: 30px solid transparent;
        }
Copy the code

It could be something like this

width: 0;
height: 0;
border-bottom: 100px solid red; 
border-left: 100px solid transparent;
Copy the code

2. The use of canvas

Canvas is a very powerful API introduced by HTML5, which is very good in small games and some animations

    / / tag
    <canvas width="600" height="600"></canvas>
    
    
    <script>
    var canvas = document.querySelector('canvas');
    // Determine if your browser can use canvas
     if (canvas.getContext){
       var ctx = canvas.getContext('2d');
        ctx.beginPath();
        // Fill the color
        ctx.fillStyle="#f3f"
        ctx.moveTo(75.50);
        ctx.lineTo(100.75);
        ctx.lineTo(100.25);
        ctx.closePath();
        / / fill
        ctx.fill();
     }
    </script>
Copy the code

3.SVG

SVG is an XML language, similar to XHTML, that can be used to draw vector graphics

<svg width="100%" height=300px version="1.1" xmlns="https://www.w3.org/2000/svg">
    <path d="M 0 0 L 300 0 L150 240 Z">
</sv
Copy the code