Обрезать border

Question

Как обрезать border? Совсем не нашёл информации.

На изображении пример, обрезать может понадобиться и больше.

.round {
  background: black;
  border: 6px solid brown;
  width: 200px;
  height: 200px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}

<div class="round"></div>

https://jsfiddle.net/8gu4sy9q/1/

Answer 1

Прямо так, как на скриншоте, т.е. рваный край? Тогда SVG и маскирование в помощь. Если просто часть окружности (сегмент), то тогда так:

.round {
  background: black;
  border: 6px solid brown;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  
  border-top: 6px solid transparent;
  transform: rotate(-45deg);
}

<div class="round"></div>

Если ориентироваться только на современные браузеры, то код можно немного сократить, используя градиенты и, при этом, угол может быть произвольным:

.round {
  height: 200px;
  width: 200px;
  border-radius: 50%;
  background-color: black;
  background-image: radial-gradient(circle, black 94px, transparent 95px),
    conic-gradient(brown 0 115deg, transparent 115deg);
}

<div class="round"></div>

Answer 2

SVG решение

Используется две окружности:

Первая окружность это чёрный фон и при радиусе равном 100px у второй окружности при ширине обводки stroke-width="10" радиус выбираем равным 95px, чтобы края окружностей совпали. Известно, что строка симметрично располагается относительно своей центральной оси. 5px внутрь, 5px снаружи.

Поэтому внешний край внутренней окружности сольется с первой, чёрной окружностью. (95+5=100px)

Обводка внутренней окружности будет показана не полностью, так как у sstroke-dasharray="447.45,149.15" длина черты равна 447.45, а пробел равен 149,5.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"  width="200" height="200" viewBox="0 0 200 200" >
    <circle cx="100" cy="100" r="100" fill="black" /> 
      <circle cx="100" cy="100" r="95" fill="none" stroke="#A5282B" stroke-width="10" stroke-dashoffset="149.15" stroke-dasharray="447.45,149.15" />
</svg>

Длину обводки можно увеличивать, уменьшать, при желании попиксельно, изменяя параметры stroke-ddasharray:

Анимация стирание линии

при анимации пробел достигает максимума = 596.6

values="
  447.45,149.15;
  0,     596.6"

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"  width="200" height="200" viewBox="0 0 200 200" >
    
    <circle cx="100" cy="100" r="100" fill="black" /> 
      <circle cx="100" cy="100" r="95" fill="none" stroke="#A5282B" stroke-width="10" stroke-dashoffset="149.15" stroke-dasharray="447.45,149.15" >
         <animate attributeName="stroke-dasharray" dur="2s" values="447.45,149.15;0,596.6" repeatCount="indefinite" /> 
      </circle>
</svg>

Анимация рисования линии

values=" 0,596.6; 447.45,149.15"

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"  width="200" height="200" viewBox="0 0 200 200" >
    
    <circle cx="100" cy="100" r="100" fill="black" /> 
      <circle cx="100" cy="100" r="95" fill="none" stroke="#A5282B" stroke-width="10" stroke-dashoffset="149.15" stroke-dasharray="447.45,149.15" >
         <animate attributeName="stroke-dasharray" dur="2s" values="0,596.6;447.45,149.15" repeatCount="indefinite" /> 
      </circle>
</svg>

Изменение положения линии

Против часовой стрелки

Изменяются параметры stroke-dashoffset, то есть изменяется начальное положение отступа

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"  width="200" height="200" viewBox="0 0 200 200" >
    
    <circle cx="100" cy="100" r="100" fill="black" /> 
      <circle cx="100" cy="100" r="95" fill="none" stroke="#A5282B" stroke-width="10" stroke-dashoffset="0" stroke-dasharray="447.45,149.15" >
         <animate attributeName="stroke-dashoffset" dur="2s" values="0;596" repeatCount="indefinite" /> 
      </circle>
</svg>

По часовой стрелке

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"  width="200" height="200" viewBox="0 0 200 200" >
    
    <circle cx="100" cy="100" r="100" fill="black" /> 
      <circle cx="100" cy="100" r="95" fill="none" stroke="#A5282B" stroke-width="10" stroke-dashoffset="0" stroke-dasharray="447.45,149.15" >
         <animate attributeName="stroke-dashoffset" dur="2s" values="596;0" repeatCount="indefinite" /> 
      </circle>
</svg>

Решение CSS

Переносим атрибуты окружностей в правила CSS

.circle2 {
fill:none;
stroke:#A5282B;
stroke-width:10;
stroke-dashoffset:149.15;
stroke-dasharray:447.45,149.15;
}

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"  width="200" height="200" viewBox="0 0 200 200" >
    
    <circle class="circle1" cx="100" cy="100" r="100" fill="black" /> 
      <circle class="circle2" cx="100" cy="100" r="95" />
</svg>

Анимация рисования сектора

.circle2 {
fill:none;
stroke:"#A5282B;
stroke-width:10;
stroke-dashoffset:149.15;
stroke-dasharray:447.45,149.15;
animation: dash 2s ease infinite;
}
@keyframes dash {
0%{stroke-dasharray:0,596.6; }
100%{stroke-dasharray: 447.45,149.15;}
}

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"  width="200" height="200" viewBox="0 0 200 200" >
    
    <circle cx="100" cy="100" r="100" fill="black" /> 
      <circle class="circle2" cx="100" cy="100" r="95" fill="none" stroke="#A5282B" stroke-width="10" stroke-dashoffset="149.15" stroke-dasharray="447.45,149.15" >
         <!-- <animate attributeName="stroke-dasharray" dur="2s" values="0,596.6;447.45,149.15" repeatCount="indefinite" />  -->
      </circle>
</svg>

БЛОГ НА HUSL

Обрезать border

Ответы (2 шт):

SVG решение

Решение CSS