How to create circle, square or triangle with javascript in HTML?

Question

I'm new to coding, and I'm trying to create three different shapes by accident after clicking - circle, square and triangle. I got my code to work with randomly creating a circle or square, but the triangle is always inside the square or circle element and never by itself. How to make so that instead of a square or a circle with a triangle, a circus, square or triangle appears inside?

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

CSS style (I tried to set the triangle as a “base” shape.

#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;
        }

Any help would be greatly appreciated. The best of coding for you.

Answer 1

CSS - . , ".". DOM class="...".

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";
}

, ;).

Answer 2

svg.

defs, .

var shape = document.getElementById('shape');
var shapes = ['circle', 'square', 'triangle'];
shape.addEventListener('click', function() {
  shape.setAttributeNS('http://www.w3.org/1999/xlink', 'href', '#' + shapes[Math.floor(Math.random() * shapes.length)]);
})

<svg width="200" height="200">
  <defs>
    <path id="circle" d="M0,100 a100,100 0 1,0 200,0 a100,100 0 1,0 -200,0" fill="rosybrown" />
    <path id="square" d="M0,0 h200 v200 h-200z" fill="tan" />
    <path id="triangle" d="M100,0 l100,200 h-200z" fill="teal" />
  </defs>
  <use id="shape" xlink:href="#circle" />
</svg>

Answer 3

You almost got it. Just apply all the border properties for each shape.

Excerpt:

setInterval(function () {
  var shape1= document.getElementById("shape1");
  if (Math.random()<=0.3){
    shape1.style.borderLeft= shape1.style.borderRight= shape1.style.borderBottom= shape1.style.borderTop= '100px solid';
    shape1.style.borderRadius="50%";
  }
  else if (Math.random()<=0.6){
    shape1.style.borderLeft= shape1.style.borderRight= shape1.style.borderBottom= shape1.style.borderTop= '100px solid';
    shape1.style.borderRadius="0";
  }
  else {
    shape1.style.borderLeft= shape1.style.borderRight= '100px solid transparent';
    shape1.style.borderBottom= '200px solid #2f2f2f';
    shape1.style.borderTop= '0';
    shape1.style.borderRadius="0";
  }
},500);

#shape1 {
  width: 0px;
  height: 0px;
  font-size: 0;
  line-height: 0;
}

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

Run code