JSFiddle - React, Tailwind, and code Playground

by Derek Leung

HTML

<!-- CSS -->
CSS:
<div></div>

<hr>
<!-- SVG -->
SVG:
<svg width="16" height="10">
    <polygon points="0,0 16,0 8,10"/>
</svg>

<hr>
<!-- JavaScript -->
JavaScript:
<canvas width="16" height="10"></canvas>

CSS

div {
    width: 0px;
    height: 0px;
    border-top: 10px solid black;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: none;
}

svg, div, canvas{
    display: inline-block;
}

JavaScript

var ctx = document.querySelector("canvas").getContext("2d");

// do not use with() outside of this demo!
with(ctx){
    beginPath();
    moveTo(0,0);
    lineTo(16,0);
    lineTo(8,10);
    fill();
    endPath();
}