5

Здравствуйте. Появилась проблема - нужно сделать блок такого вида:

Пример блока из макета

Не знаю, как верно сделать блок с единичкой. Попробовал спозиционировать float: left; и поровнять margin'ами, но мне кажется, что это не самый лучший вариант, плюс не срабатывает margin-left.

Буду рад помощи.

.top {
  width: 180px;
  height: 180px;
  background-color: #000;
  border-radius: 110px;
  border: 6px solid #f7d701;
}

.circle {
  height: 50px;
  width: 50px;
  background-color: #f7d701;
  border-radius: 110px;
  color: #000;
  text-align: center;
  line-height: 50px;
  float: right;
  margin-top: 67px;
  font-size: 19px;
}
<div class="top"> 
  <div class="circle">1</div>
</div>

https://codepen.io/anon/pen/brpZBM

2
  • Если ответ помог решить вашу проблему, вы можете отметить его принятым, нажав на галочку рядом с ним.
    – Cheg
    10 авг 2017 в 14:49
  • @Cheg, ответов много, и увы не могу решить какой лучший. Поэтому, призываю эксперта/модератора помочь с решением лучшего ответа.
    – Felix
    11 авг 2017 в 13:27

4 ответа 4

4

div {
  width: 10em;
  border-radius: 50%;
  background: black;
  border: 6px solid red;
  text-align: right;
}

div:before { /* для вертикального центрирования */
  content: "";
  display: inline-block;
  vertical-align: middle;
  padding-top: 100%; /* высота равна ширине */
}

div:after {
  content: "1";
  display: inline-block;
  vertical-align: middle;
  color: white;
  background: blue;
  line-height: 3em;
  width: 3em;
  text-align: center;
  border-radius: 50%;
  /* ПЕРЕДУМАЛ: margin-right: -3px; /* половина от border-width родителя */
  transform: translateX(50%); /* и подвинуть ещё на половину мелкого круга */
}
<div></div>

2
  • Твой ответ хотя бы чем то отличается от двух остальных :) +1
    – Yuri
    1 авг 2017 в 11:24
  • Потому что является нормальным)) зачем плодить лишнюю вложенность и лишние элементы
    – DaemonHK
    1 авг 2017 в 15:19
2

.top {
  width: 180px;
  height: 180px;
  background-color: #000;
  border-radius: 110px;
  border: 6px solid #f7d701;
}

.circle {
  height: 50px;
  width: 50px;
  background-color: #f7d701;
  border-radius: 110px;
  color: #000;
  text-align: center;
  line-height: 50px;
  float: right;
  margin-top: 67px;
  font-size: 19px;
  
  position: relative;
  right: -25px;
}
<div class="top">
  <div class="circle">1</div>
</div>

2

Совсем как на картинке:

.top {
  width: 180px;
  height: 180px;
  background-color: #000;
  border-radius: 110px;
  border: 6px solid #f7d701;
  position: relative;
}

body {
  background: black;
}

.circle {
  height: 50px;
  width: 50px;
  background-color: #f7d701;
  border-radius: 110px;
  color: #000;
  text-align: center;
  line-height: 50px;
  font-size: 19px;
  position: absolute;
  right: 0;
  top: 50%;
  font-size: 175%;
  transform: translate(50%, -50%);
}
<div class="top">
  <div class="circle"><b>1</b></div>
</div>

2

Используйте для этого абсолютное позиционирования для блока с единицей. В отличие от вашего варианта с float и margin, вариант с position:absolute выводит "единицу" из общего потока, и таким образом она в дальнейшем не будет "мешать", сли вам потребуется, напривер, добавить в большой круг новые элементы.

.top {
  width: 180px;
  height: 180px;
  background-color: #000;
  border-radius: 110px;
  border: 6px solid #f7d701;
  position: relative;
}

.circle {
  height: 50px;
  width: 50px;
  background-color: #f7d701;
  border-radius: 110px;
  color: #000;
  text-align: center;
  line-height: 50px;
  font-size: 19px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(50%, -50%);
}
<div class="top">
  <div class="circle">1</div>
</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.