Простіший спосіб створити роздільник кола, ніж використовувати зображення?

Мені цікаво, чи існує простіший спосіб створити кругові дзьоби, ніж те, що я зараз роблю.

Наразі я просто створюю зображення для кожного різного розміру, але це прикро це робити.

Чи є все-таки за допомогою CSS для створення divs, які кругові, і я можу вказати радіус?

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

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

Якщо встановити радіус кордону кожної сторони елемента на 50%, ви зможете створити коло з будь-яким розміром:

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

Спробуйте це

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

Це насправді можливо.

Дивіться: CSS Порада: Як зробити кола без зображень . Дивіться демонстрацію .

Але будьте попереджені, це має серйозні недоліки щодо сумісності в основному, ви робите котячий гавкіт.

Дивіться, як це працює тут

Як ви побачите, вам просто потрібно встановити heightі widthдо половиниborder-radius

Удачі!

Існує також [погана ідея] використання декількох (20+) горизонтальних або вертикальних 1px знаків для побудови кола. Цей плагін jQuery використовує цей метод для побудови різних фігур.

Надайте ширину та висоту залежно від розміру, але дотримуйтесь обох рівних

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

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

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

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

Ви імпортуєте файл css-джерела, що знаходиться на випадок, або з CDN сюди

і тоді ви просто:

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

і ви можете надати йому будь-який колір, який ви хочете, будь-якого розміру шрифту.

Ви можете спробувати функцію radial-gradientCSS:

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

Скажімо, у вас є таке зображення:

щоб зробити з цього коло, вам потрібно лише додати

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

Тож якщо у вас є діва, ви можете зробити те саме.

Перевірте приклад нижче:

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

Ви можете використовувати радіус, але він не працюватиме на IE : border-radius: 5px 5px;.

в основному для цього використовується позиція 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>

Додавання cssвластивості:

border-radius: 50%;

будь-який дів робить це круговим.

Для кола створіть елемент div, а потім введіть ширину = 2 рази від радіуса кордону = 2 рази. Також висота рядка = 0 Наприклад, з радіусами кола 50px, код нижче працює добре:

width: 100px;
padding: 50px 0;
border: solid;
line-height: 0px;
border-radius: 50px;