Css shapes

Question

If i wanted to make a colour of a CSS shape change, how do I do it without doing it manually. E.g. if i wanted to make a game and when you went onto a new level the colour would change itself how would i do it?

Answer 1

in this example, I made a js function to make the div with id circle automatically change its color with random color

note: explanation in a comment inside code below

<!----The Code Start---->
<div id='circle'></div>

<style>
#circle {
width: 50px; height: 50px;
border-radius: 50%;
</style>

<script>
window.onload = function() {
// window.onload used to make javascript working after the html finished loaded

var a = document.getElementById("circle"); // referring a html element with id circle

function run() {
var r = Math.ceil(Math.random()*255); // make a random number from 1 to 255 as red
var g = Math.ceil(Math.random()*255); // make a random number from 1 to 255 as green
var b = Math.ceil(Math.random()*255); // make a random number from 1 to 255 as blue

a.style.background = "rgb("+r+","+g+","+b+")";
// a calling the variable a above
// style call a css code, without this your css you made in js never work
// background referring a css code — background.
// "rgb("+r+","+g+","+b+")" //this is a normal css code, but it call the red/green/blue values from random number made from the three variables
}

setInterval(run, 200); // call the function run() every 200ms
// it use the ms units, 200 mean 200ms and 1s == 1000
}
</script>
<!----The Code End---->

hth, cmiiw

Answer 2

ok thanks!!!

Answer 3

#square {
width: 100px;
height: 100px;
background: red;
}

#rectangle {
width: 200px;
height: 100px;
background: red;
}

#oval {
width: 200px;
height: 100px;
background: red;
border-radius: 100px / 50px;
}

#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}

these are some shapes hope it will help you

Answer 4

so like
if(newlvl == 5){
var circle = "#FFFFF";
}

Answer 5

sort of but changing colors requires a bit more code. Post your code and id be happy to help ☺

Answer 6

Ok, thanks. The code is called 'Zakstudios15 CSS'

Answer 7

you would need Javascript for that. When the condition that changes levels is met, call a function that changes the colors.