Is it possible to create small circles through CSS?

Question

Instead of using images, I was wondering if anyone knows how to create small circles with outlines using CSS.

I am trying to do something similar to the bullseye symbol or the Target logo.

Answer 1

Take a look at this library: http://jsdraw2d.jsfiction.com/

For drawing circles, there are examples at http://jsdraw2d.jsfiction.com/demo/circleellipse.htm

Answer 2

You can use rounded divs.

<style> .circle{ -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px; border:1px solid #ccc; width:8px; height:8px; } </style> <div class="circle"></div> 

But maybe it's better to use canvas and JavaScript.

Answer 3

Not sure if I really understood your question, but here is how you draw a circle with CSS:

 .circle { height: 100px; width: 100px; display: block; border: 1px solid black; border-radius: 100px; } 

Answer 4

For anyone who wants to draw a small circle, the following code uses scale to resize the circle. Just collect the scale values ​​and you're good to go!

 .circle{ border: 2px solid #1111a1; padding: 10px 40px; background: #dddddd; width: 1px; height: 60px; border-radius: 100px; transform: scale(0.5, 0.5); } 

Plunkr