Нарисовать круг, используя только CSS

Можно ли нарисовать круг, который будет отображаться в большинстве браузеров (IE, Mozilla, Safari), используя только CSS?    

Перевод вопроса: Draw Circle using css alone
    

Ответы

Ответ 1

Ну раз уж в вопросе сказано "используя только CSS", то так и отвечу:



html {
  background: white;
}

body {
  width: 10em; /* поддерживаются любые единицы, в том числе проценты */
  margin: 1em auto;
  background: silver;
  border-radius: 50%;
}

body::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  padding-top: 100%;
}


Ответ 2

Создайте div с одинаковым высотой и шириной, образуя тем самым
квадрат (для круга используйте те же величины).  
Добавьте border-radius 50%, что сделает квадрат круглым по форме.    
Затем вы можете поиграть с фоном-цветом / градиентами / (даже с
псевдоэлементами), чтобы создать что-то вроде этого:     




.red {
  background-color: red;
}
.green {
  background-color: green;
}
.blue {
  background-color: blue;
}
.yellow {
  background-color: yellow;
}
.sphere {
  height: 200px;
  width: 200px;
  border-radius: 50%;
  text-align: center;
  vertical-align: middle;
  font-size: 500%;
  position: relative;
  box-shadow: inset -10px -10px 100px #000, 10px 10px 20px black, inset 0px 0px 10px black;
  display: inline-block;
  margin: 5%;
}
.sphere::after {
  background-color: rgba(255, 255, 255, 0.3);
  content: '';
  height: 45%;
  width: 12%;
  position: absolute;
  top: 4%;
  left: 15%;
  border-radius: 50%;
  transform: rotate(40deg);
}









Перевод ответа: Draw Circle using css alone @jbutler483


Ответ 3

А мне понравился этот ответ, он единственный из всех поддерживает IE8-, поскольку не использует border-radius:

Вместо этого вставляется символ круга, с номером unicode 25СF:



.circle:before {
  content: ' \25CF';
  font-size: 200px;
}



Ответ 4

Думаю с кодом тут все понятно:



.circle {
    width: 100px;
    height: 100px;
    background: blue;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
} 



Ответ 5

Вот миксин для создания круга 


@mixin circle($width, $color) {
      width: $width;
      height: $width;
      background: $color;
      border-radius: $width/2;
    }

.circle {
  @include circle(200px, #123);
}


Использование - 





Ответ 6

Ещё есть вариант с использованием кругового градиента:



.circle {
  width: 200px;
  height: 200px;
  background-image: radial-gradient(black 0%, black 70%, transparent 70%);
}