Search notes:

CSS: Draw a circle

Note the transform property.

<!doctype html>

<style>
body {
   margin: 0;
   background: linear-gradient(10deg, AliceBlue, DeepSkyBlue);
   height: 100vh;
}

.circle {
   position: absolute;
   width: 50px;
   height: 50px;
   background: blue;
   border-radius: 50%;
   transform: translate(-25px, -25px);
}
</style>

<div class='circle' style='left:   0px; top:   0px'></div>
<div class='circle' style='left: 500px; top: 200px'></div>
<div class='circle' style='left: 140px; top: 240px'></div>
<div class='circle' style='left: 240px; top: 360px'></div>
<div class='circle' style='left: 300px; top:  60px'></div>

<div class='circle' style='left: 200px; top: 200px'></div>
<div class='circle' style='left: 300px; top: 300px'></div>

<div style='position: absolute; border: 1px solid navy; left: 200px; top: 200px; width: 100px; height: 100px;background-color: rgba(250, 250, 250, 0.3);'></div>

Github repository about-css, path: /examples/circle.html

Index