JSFiddle - React, Tailwind, and code Playground

HTML

<div id="area"></div>

CSS

#area {
    width:500px;
    height:500px;
    background-color:#000;
}
.triangle {
    position:absolute;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 10px 20px 10px;
    border-color: transparent transparent #FFF transparent;
}

JavaScript

var numberOfElements = 20;
var triangleHeight = 20;

function createElements() {
    for (var i = 0; i < numberOfElements; i++) {
        $("#area").append('<div id="' + i + '" class=" triangle "></div>');
    }
}

function getArea() {
    return {
        w: $("#area").width(),
        h: $("#area").height()
    };
}

function getCircle() {
    var area = getArea();
    return {
        x: area.w / 2,
        y: area.h / 2,
        r: area.w / 4
    };
}

function transformElements(circle) {
    for (var i = 0; i < numberOfElements; i++) {
        var $triangle = $("#" + i);

        var angle = (360 / numberOfElements) * i + 90;
        var slice = (2 * Math.PI / numberOfElements) * i;

        var halfTriangle = triangleHeight / 2;

        var tempRadius = circle.r + halfTriangle;
        var traingleCentreX = circle.x + tempRadius * Math.cos(slice);
        var traingleCentreY = circle.y + tempRadius * Math.sin(slice);

        $triangle.css("left", (traingleCentreX - halfTriangle) + "px");
        $triangle.css("top", (traingleCentreY - halfTriangle) + "px");
        
        rotate($triangle, angle);
    }
}

function rotate(element, angle) {
    element.css({
        '-webkit-transform': 'rotate(' + angle + 'deg)'
    });
    element.css({
        '-moz-transform': 'rotate(' + angle + 'deg)'
    });
}

createElements();

var circle = getCircle();

transformElements(circle);