Is there a way to display circles randomly inside a box without them extending beyond the box or touching its corners? Can the circles be plotted using relative values (percent) within the div? For example, can a circle be placed 10% from the left side and 40% from the top of the box? The positioning should be relative to the box itself. Currently, the percent values are based on the whole page rather than just the div (box).
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="triangle.css">
<body align = "center">
<div id='area' align = "center"
style="width:90vw; height:40vw; border: 2px solid; margin-top:2%; margin-left:auto; margin-right:auto;">
</div>
Javascript function:
for(var i=0; i<10;i++){
Left = Math.floor(Math.random() * 80)+10;
Top = Math.floor(Math.random() * 20) +5;
$("#area").append("<div class='circle-blue' + id=" + i + "></div>");
$("#" +i).css({"position":"absolute","top": Top + "%", "left": Left + "%"});
};
Check out the fiddle here: