如何在HTML中使用JavaScript创建圆形,方形或三角形？

我是编码的新手,我试图在点击后随机创建三种不同的形状 – 圆形,正方形和三角形.我已经让我的代码随机创建一个圆形或正方形,但三角形总是在方形或圆形元素内,而不是自己.如何制作圆形,方形或三角形而不仅仅是一个内部有三角形的正方形或圆形？

<div id="shape1"></div>

CSS样式(我试图将三角形设置为“基础”形状.

#shape1 {
    width: 0;
    height: 0;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 200px solid #2f2f2f;
    font-size: 0;
    line-height: 0;
}

main.js

setTimeout(function () {
        if (Math.random()<=0.3){
            document.getElementById("shape1").style.borderRadius="50%";
        }
        else if (Math.random()<=0.6){
            document.getElementById("shape1").style.borderRadius="0";
        }
        else {
            document.getElementById("shape1").style = this.self;
        }

任何帮助将不胜感激.最好的编码给你.

解决方法

您可以定义三个不同的CSS类 – 每个形状一个类.请注意,样式表中的类以点“.”开头.并使用class =“…”属性应用于DOM元素.

在CSS文件中定义这四个CSS规则：

#shape1 {
    /* common styles for all shapes */
}

.square {
    /* square specific CSS */
}
.circle {
    /* circle specific CSS */
}
.triangle {
    /* triangle specific CSS */
}

你现在可以做的只是在元素上设置正确的类：

var shape = document.getElementById("shape1");

if (Math.random()<=0.3){
    shape.className = "square";
}
else if (Math.random()<=0.6){
    shape.className = "circle";
}
else {
    shape.className = "triangle";
}

我希望这就是你想要做的;).