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

455

17 марта 2017, 23:45

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

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

Answer 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%; 
}

Answer 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); 
}

<div class="sphere red"></div> 
<div class="sphere green"></div> 
<div class="sphere blue"></div> 
<div class="sphere yellow"></div> 
<div class="sphere"></div>

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

Answer 3

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

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

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

<span class="circle"></span>

Answer 4

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

@mixin circle($width, $color) {
      width: $width;
      height: $width;
      background: $color;
      border-radius: $width/2;
    }
.circle {
  @include circle(200px, #123);
}

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