JSFiddle - React, Tailwind, and code Playground

by Zhou Wenhong

HTML

<div id="J-demo" class="demo"></div>

CSS

.demo p {
    color: #0af;
    text-align: center;
    line-height: 0.5;
}

JavaScript

//生成平行四边形
(function (sideNum, letter) {
    String.prototype.repeat = function (num) {
        return (new Array(++num)).join(this);
    }

    var i = 1,
        str_1 = '',
        str_2 = '',
        tmp;

    for (; i <= sideNum; i++) {
        tmp = '<p>' + letter.repeat(2 * i - 1) + '</p>';
        str_1 += tmp;

        if (i != sideNum) {
            str_2 = tmp + str_2;
        }
    }

    document.getElementById('J-demo').innerHTML = str_1 + str_2;

})(5, 'A');