Более простой способ создать круг Div, чем с помощью изображения? - PullRequest
Новая
       76

Более простой способ создать круг Div, чем с помощью изображения?

167 голосов
/ 30 января 2011

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

В настоящее время я просто создаю изображение для каждого размера, но это раздражает.

Есть ли в любом случае использование CSS для создания округлых элементов div, и я могу указать радиус?

Ответы [ 13 ]

0 голосов
/ 04 марта 2019

Для круга создайте элемент div и введите width = 2 раза радиуса границы = 2 раза отступа. Также line-height = 0 Например, с радиусами круга 50px, приведенный ниже код работает хорошо: 

width: 100px;
padding: 50px 0;
border: solid;
line-height: 0px;
border-radius: 50px;
0 голосов
/ 16 декабря 2017

Добавление свойства css:

border-radius: 50%;

к любому div делает его круглым.

0 голосов
/ 19 апреля 2015

в основном это использует абсолютную позицию div для размещения символа в заданных координатах. поэтому, используя параметрическое уравнение для круга, вы можете нарисовать круг. если вы измените положение div на относительное, это приведет к синусоиде ...

В сущности, мы строим уравнения, злоупотребляя свойством позиции. я не очень хорошо разбираюсь в css, так что кто-то может сделать это более элегантно. наслаждаться.

это работает на всех браузерах и мобильных устройствах (о которых я знаю). Я использую его на своем собственном сайте, чтобы рисовать синусоиды текста (www.cpixel.com). оригинальный источник этого кода находится здесь: www.mathopenref.com/coordcirclealgorithm.html

    <html>
    <head></head>
    <body>
    <script language="Javascript">

    var x_center = 50; //0 in both x_center and y_center will place the center
    var y_center = 50; // at the top left of the browser
    var resolution_step = 360; //how many times to stop along the circle to plot your character.
    var radius = 50; //how big ya want your circle?
    var plot_character = "·"; //could use any character here, try letters/words for cool effects
    var div_top_offset=10;
    var div_left_offset=10;
    var x,y;

    for ( var angle_theta = 0;  angle_theta < 2 * Math.PI;  angle_theta += 2 * Math.PI/resolution_step ){
        x = x_center + radius * Math.cos(angle_theta);
        y = y_center - radius * Math.sin(angle_theta);
        document.write("<div style='position:absolute;top:" + (y+div_top_offset) + ";left:"+ (x+div_left_offset) + "'>" + plot_character + "</div>");
    }

    </script>
    </body>
    </html>
Страница:
...