Простой способ создания круга div, чем использование изображения?

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

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

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

+159
источник поделиться
13 ответов

Вот демо: http://jsfiddle.net/thirtydot/JJytE/1170/

CSS

.circleBase {
    border-radius: 50%;
    behavior: url(PIE.htc); /* remove if you don't care about IE8 */
}

.type1 {
    width: 100px;
    height: 100px;
    background: yellow;
    border: 3px solid red;
}
.type2 {
    width: 50px;
    height: 50px;
    background: #ccc;
    border: 3px solid #000;
}
.type3 {
    width: 500px;
    height: 500px;
    background: aqua;
    border: 30px solid blue;
}

HTML:

<div class="circleBase type1"></div>

<div class="circleBase type2"></div><div class="circleBase type2"></div>

<div class="circleBase type3"></div>

Чтобы сделать эту работу в IE8 и старше, вы должны скачать и использовать CSS3 PIE. Моя демонстрация выше не будет работать в IE8, но это только потому, что jsFiddle не поддерживает PIE.htc.

Моя демонстрация выглядит так:

YffpL.png

+274
источник

Установка радиуса границы каждой стороны элемента на 50% создаст круглый дисплей любого размера:

.circle {
  border-radius: 50%;
  width: 200px;
  height: 200px; 
  /* width and height can be anything, as long as they're equal */
}
+20
источник
другие ответы

Связанные вопросы


Похожие вопросы

Попробуйте это

.iphonebadge {
  border-radius:99px;
 -moz-border-radius:99px;
 -webkit-border-radius:99px;
  background:red;
  color:#fff;
  border:3px #fff solid;
  background-color: #e7676d;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#e7676d), to(#b7070a)); /* Saf4+, Chrome */
  background-image: -webkit-linear-gradient(top, #e7676d, #b7070a); /* Chrome 10+, Saf5.1+, iOS 5+ */
  background-image: -moz-linear-gradient(top, #e7676d, #b7070a); /* FF3.6 */
  background-image: -ms-linear-gradient(top, #e7676d, #b7070a); /* IE10 */
  background-image: -o-linear-gradient(top, #e7676d, #b7070a); /* Opera 11.10+ */
  background-image: linear-gradient(top, #e7676d, #b7070a);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#e7676d', EndColorStr='#b7070a'); 
 -webkit-box-shadow: 0px 2px 4px #000000; /* Saf3-4 */
 -moz-box-shadow: 0px 2px 4px #000000; /* FF3.5 - 3.6 */
  box-shadow: 0px 2px 4px #000000; /* Opera 10.5, IE9, FF4+, Chrome 10+ */
  display:inline-block;
  padding:2px 2px 2px 2px ;
  margin:3px;
  font-family:arial;
  font-weight:bold;
   }
+13
источник

Это на самом деле возможно.

См. CSS Совет: Как сделать круги без изображений. Смотрите демо.

Но имейте в виду, у него есть серьезные недостатки с точки зрения совместимости, в основном, вы делаете лай кошки.

Посмотрите, как это работает здесь

Как вы увидите, вы просто должны установить height и width половине border-radius

Удачи!

+6
источник

Кроме того, [плохая идея] использует несколько (20+) горизонтальных или вертикальных div 1px для построения круга. Этот плагин jQuery использует этот метод для создания разных форм.

+3
источник

Дайте ширину и высоту в зависимости от размера, но сохраните равные

.circle {
  background-color: gray;
  height: 400px;
  width: 400px;
  border-radius: 100%;
}
<div class="circle">
</div>
+3
источник

.fa-circle{
  color: tomato;
}

div{
  font-size: 100px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div><i class="fa fa-circle" aria-hidden="true"></i></div>

Просто хотел упомянуть еще одно решение, которое отвечает на вопрос "Простой способ создания круга div, чем использование изображения?" который должен использовать FontAwesome.

Вы импортируете файл fontSome css или из CDN здесь

а затем вы просто:

<div><i class="fa fa-circle" aria-hidden="true"></i></div>

и вы можете дать ему любой цвет, который вам нужен, размер шрифта.

+3
источник

Вы можете использовать радиус, но он не будет работать в IE: border-radius: 5px 5px;.

+1
источник

Вы можете попробовать функцию radial-gradient CSS:

.circle {
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: #ffffff; /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover, #ffffff 17%, #ff0a0a 19%, #ff2828 40%, #000000 41%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover, #ffffff 17%,#ff0a0a 19%,#ff2828 40%,#000000 41%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center, #ffffff 17%,#ff0a0a 19%,#ff2828 40%,#000000 41%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

Примените его к слою div:

<div class="circle"></div>
+1
источник

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

по сути, мы являемся графическими уравнениями, злоупотребляя свойством position. Я не очень хорошо разбираюсь в 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>
0
источник

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

border-radius: 50%;

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

0
источник

Допустим, у вас есть это изображение:

icon.javascript.png

чтобы сделать из этого круг, нужно только добавить

.circle {
  border-radius: 50%;
  width: 100px;
  height: 100px; 
}

Так что, если у вас есть div, вы можете сделать то же самое.

Проверьте пример ниже:

.circle {
  border-radius: 50%;
  width: 100px;
  height: 100px; 
  animation: stackoverflow-example infinite 20s linear;
  pointer-events: none;
}

@keyframes stackoverflow-example {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
<div>
  <img class="circle" src="https://www.sitepoint.com/wp-content/themes/sitepoint/assets/images/icon.javascript.png">
</div>
0
источник

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

width: 100px;
padding: 50px 0;
border: solid;
line-height: 0px;
border-radius: 50px;
-1
источник

Посмотрите другие вопросы по меткам или Задайте вопрос