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

Question

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

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

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

Answer 1

Вот демонстрация: 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.

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

Answer 2

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

.circle {
  border-radius: 50%;
  width: 200px;
  height: 200px; 
  /* width and height can be anything, as long as they're equal */
}

Answer 3

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

.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;
   }

Answer 4

Это действительно возможно.

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

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

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

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

Удачи!

Answer 5

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

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

и затем просто:

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

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

Answer 6

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

.circle {
  background-color: gray;
  height: 400px;
  width: 400px;
  border-radius: 100%;
}

<div class="circle">
</div>

Answer 7

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

Answer 8

Вы можете попробовать функцию 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>

Answer 9

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

Answer 10

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

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

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