Menu
Rather than using images, I was wondering if anyone knows how to make small circles with outlines using CSS.
I'm trying to make something similar to the bullseye symbol or Target logo.
634
To make a circle, use border-radius: 50% . Then just position 6 circular divs with absolute positioning around the larger circle.
Example of creating a circle with a text inside: Here, we set a percentage width and border-radius for the container. Then, we add an empty block of padding-bottom to the :after pseudo-element. Thus we can have the same result of creating a container with equal width and height.
Creating an empty circle with CSS To create an empty circle first of all add an empty <div> element. Use CSS border-radius: 50% to make the div element circular. Additionally set the height, width and border of <div> element.
For anyone else who wants to draw a small circle, the following code makes use of scale to resize the circle. Just chamge 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
116
You can use div's with rounded corners.
<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, may be, it's better to use canvas and JavaScript.
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
