6

Мой вопрос:

Возможно ли сделать средствами CSS данный блок(интересует круглый border):

Пример round border

Пожалуйста, обратите внимание, синий круг над серым.

Мой вариант: я сделал, но с помощью картинки:

.number {
  position: relative;
  width: 105px;
  height: 105px;
  text-align: center;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 30px;
}
.number.number_img:before {
  content: '';
  position: absolute;
  right: -2px;
  top: -2px;
  width: 100%;
  height: 100%;
  display: block;
  background-image: url(https://erweb.ru/wp-content/uploads/2017/08/circles-1.png);
  background-repeat: no-repeat;
  background-position: top right;
  z-index: 2;
}
.number .number__value {
  position: relative;
  font-family: 'Montserrat', sans-serif;
  font-size: 55px;
  font-weight: 500;
  line-height: 0.55;
  display: block;
  padding: 35px;
  max-width: 100px;
  max-height: 100px;
  border-radius: 50px;
  color: #3e9ded;
  border: solid 1px #cccccc;
}
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500" rel="stylesheet">
<div class="number number_img"> <span class="number__value">1</span></div>

1). Ваш вариант должен иметь возможность настройки на любую длину синего круга, чтобы можно было получить и такой:

Пример round border

2). Данный блок не подразумевает какую-либо анимацию, решение на CSS должно быть.
3). Скругление концов полуокружности не обязательная часть, интересует только корректное наложение одного круга над другим, с возможностью ставить произвольно длину синего круга.

4
  • А задаваться длина синей полосы будет из js?
    – Cheg
    28 авг 2017 в 11:46
  • Здравствуйте Cheg! Интересует только CSS решение. Я добавил про длину, чтобы решение было универсальным, иначе оно не имеет много смысла. Данный вопрос не подразумевает какой-либо анимации на блоке. 28 авг 2017 в 11:47
  • Скругление концов полуокружности - обязательная часть? Если да, то это надо в сторону svg думать скорее. 28 авг 2017 в 11:53
  • Здравствуйте MedvedevDev! Скругление концов полуокружности не обязательная часть, интересует именно корректное отображение одного над другим. Добавлю в задание. 28 авг 2017 в 11:55

2 ответа 2

8

Ответ по замечаниям в комментариях насчёт ступенек.

Только круг что накладывается не идеально ровным выглядит, т.е. не идеально гладкие края. – Alexandr Kazakov

  1. Атрибут svg stroke-width рисуется своеобразно: половина толщины строки размещается снаружи фигуры, вторая половина внутри фигуры.
    Если круг имеет радиус 52px, то при stroke-width="5px" внешний и внутренний радиус строки будет 54.5px и 49.5px соответственно. Что не совсем правильно, так как минимальной единицей svg является 1px, то есть лучше придерживаться целочисленных значений, чтобы избежать эффекта ступенек на границе изображения.
    В нашем случае нужно выбирать ширину строки либо 4px либо 6px.

<svg xmlns="http://www.w3.org/2000/svg" width="108" height="108" viewBox="0 0 108 108">
      <circle cx="54" cy="54" r="52" fill="none" stroke="#d3d3d3"  />
      <circle cx="54" cy="54" r="52" fill="none" stroke="blue" stroke-width="4px" stroke-dasharray="327" stroke-dashoffset="247" />
    </svg>

  1. Второй вариант возникновения конфликта полупиксельного перекрытия может возникнуть в случае, когда две окружности имеют равные радиусы, но ширина строк закраски stroke-width отличается на 1px друг от друга. Например у одной окружности ширина строки - 6px у второй -7px. Так как ширина делится на два, то перекрытие получается в полпикселя.

Пример возникновения ступенек при этих параметрах:

<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 112 112">
      <circle cx="56" cy="56" r="52" fill="none" stroke="#d3d3d3" stroke-width="7px" />
      <circle cx="56" cy="56" r="52" fill="none" stroke="blue" stroke-width="6px" stroke-dasharray="327" stroke-dashoffset="247" />
    </svg>

  1. Убираем размытие краёв, устранив полупиксельное перекрытия выбором одинаковой ширины строки закраски - 6px.

<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 112 112">
      <circle cx="56" cy="56" r="52" fill="none" stroke="#d3d3d3" stroke-width="6px" />
      <circle cx="56" cy="56" r="52" fill="none" stroke="blue" stroke-width="6px" stroke-dasharray="327" stroke-dashoffset="247" />
    </svg>

  1. Вариант с четырьмя окружностями

.container {
width:112px; 
margin:10px;

}
.rotate {
 transform: rotate(-90deg);
}
#grey {
fill:none;
stroke:#d3d3d3; 
stroke-width:2px;
}
#blue {
fill:none;
stroke:#3e9ded;; 
stroke-width:6px;
stroke-linecap: round; 
stroke-dasharray: 327px;
} 
<div class="container">
	<div class="rotate">
	   <svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 112 112">
		  <circle id="grey" cx="56" cy="56" r="52"  />
		  <circle id="blue" cx="56" cy="56" r="52"  stroke-dashoffset="288" />
		</svg>
	</div>
</div>	  
   
   <div class="container">
	<div class="rotate">
	   <svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 112 112">
		  <circle id="grey" cx="56" cy="56" r="52"  />
		  <circle id="blue" cx="56" cy="56" r="52"  stroke-dashoffset="247" />
		</svg>
	</div> 
   </div>  
   
       <div class="container">
		<div class="rotate">
		   <svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 112 112">
			  <circle id="grey" cx="56" cy="56" r="52"  />
			  <circle id="blue" cx="56" cy="56" r="52"  stroke-dashoffset="165" />
			</svg>
		</div> 
     </div>     
	 
	 <div class="container">
	<div class="rotate">
	   <svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 112 112">
		  <circle id="grey" cx="56" cy="56" r="52"  />
		  <circle id="blue" cx="56" cy="56" r="52"  stroke-dashoffset="120" />
		</svg>
	</div> 
   </div>

3
  • Здравствуйте @Alexandr_T! Благодарю за ваш ответ! В первом варианте, как я понимаю вы дали верное решение? просто там также есть ступеньки. Если возможно, пожалуйста, сделайте в одном варианте все 4 варианта круга, как в ответе у @Cheg, так будет более наглядно показано, есть разница или нет. 28 авг 2017 в 17:55
  • @Приветствую. У меня нет ступенек, скриншот в максимальном увеличении Вариант 1. -- i.stack.imgur.com/4sFMV.png 28 авг 2017 в 18:06
  • @AlexandrKazakov сделаю только круги SVG в четырех вариантах, остальное добавите из варианта Cheg и просьба к вам - отдайте ему решение (зеленая галочка) Я только вносил теоритические (svg) уточнения 28 авг 2017 в 18:17
7

Решение с использованием SVG:

.number {
  position: relative;
  width: 105px;
  height: 105px;
  text-align: center;
  display: block;
  border-radius: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 30px;
  border: solid 1px #cccccc;
}

.number .number__value {
  position: relative;
  font-family: 'Montserrat', sans-serif;
  font-size: 55px;
  font-weight: 500;
  line-height: 0.55;
  display: block;
  padding: 35px;
  max-width: 100px;
  max-height: 100px;
  color: #3e9ded;
}

.number__fill {
  position: absolute;
  z-index: 2;
  left: -1px;
  top: -1px;
  right: -1px;
  bottom: -1px;
}

.number__fill svg {
  fill: none;
  stroke: #3e9ded;
  stroke-width: 5px;
  overflow: visible;
  transform: rotate(-90deg);
  stroke-linecap: round;
  stroke-dasharray: 330px;
}
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,500" rel="stylesheet">
<div class="number number_img">
  <span class="number__value">1</span>
  <div class="number__fill">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 104 104">
      <circle cx="52" cy="52" r="52" stroke-dashoffset="288" />
    </svg>
  </div>
</div>
<div class="number number_img">
  <span class="number__value">2</span>
  <div class="number__fill">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 104 104">
      <circle cx="52" cy="52" r="52" stroke-dashoffset="247" />
    </svg>
  </div>
</div>
<div class="number number_img">
  <span class="number__value">3</span>
  <div class="number__fill">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 104 104">
      <circle cx="52" cy="52" r="52" stroke-dashoffset="165" />
    </svg>
  </div>
</div>
<div class="number number_img">
  <span class="number__value">4</span>
  <div class="number__fill">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 104 104">
      <circle cx="52" cy="52" r="52" stroke-dashoffset="120" />
    </svg>
  </div>
</div>

В данном случае в атрибуте stroke-dasharray 330 - длина всего круга (если точнее, то 329.3343811035156), а stroke-dashoffset - смещение обводки относительно начального положения.

5
  • Классно! Только круг что накладывается не идеально ровным выглядит, т.е. не идеально гладкие края. 28 авг 2017 в 12:09
  • @AlexandrKazakov она отрисовывается точно такая же, как и если бы бордеру задать такие же свойства - border:blue solid 5px; Можете проверить, обрамление в таком случае будет таким же слегка ступенчатым
    – Cheg
    28 авг 2017 в 12:22
  • @AlexandrKazakov изменив цвет на более светлый голубой, получаем более гладко отрисованные линии
    – Cheg
    28 авг 2017 в 13:07
  • @Cheg Минимальной единицей в SVG является 1px, поэтому, чтобы избежать ступенек, необходимо выбирать целочисленные значения атрибутов svg. Например r=52px . 28 авг 2017 в 13:13
  • @Alexandr_T благодарю за пояснение, но в данном случае, если заменить все на целые единицы и вместо светлоголубой обводки задать просто blue, то ступеньки все равно остаются
    – Cheg
    28 авг 2017 в 13:18

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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