Можно ли сделать маленькие круги с помощью CSS?

Question

Вместо того, чтобы использовать изображения, мне было интересно, если кто-нибудь знает, как сделать маленькие круги с контурами, используя CSS.

Я пытаюсь сделать что-то похожее на символ яблочко или логотип цели.

Answer 1

Вы можете использовать div с закругленными углами.

<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>

Но, может быть, лучше использовать canvas и JavaScript.

Answer 2

Для тех, кто хочет нарисовать маленький круг, следующий код использует масштаб для изменения размера круга.Просто измените значения шкалы, и вы готовы!

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

Plunkr

Answer 3

Не уверен, что я действительно понял ваш вопрос, но вот как вы рисуете круг с помощью CSS:

.circle
{
    height: 100px;
    width: 100px;

    display: block;
    border: 1px solid black;

    border-radius: 100px;
}

Answer 4

Посмотрите на эту библиотеку: http://jsdraw2d.jsfiction.com/

Для рисования кругов есть примеры в http://jsdraw2d.jsfiction.com/demo/circleellipse.htm