Как сделать градиент границы диагонального круга?

конический градиент-это градиент, который идет по дуге окружности вокруг центра. Это то, что мы видим в цветных колесах. Как отметил Paulie_D, в настоящее время это невозможно с CSS, но Леа веру разработала для него полифилл.

сказав это, то, что вы ищете не похоже на конический градиент, это нормально угловой линейный градиент, но применяется только к границам. Это не может быть достигнуто через CSS border-image свойство из-за того, как оно предназначено для работы согласно технические характеристики.

фоны коробки, но не ее изображение границы, обрезаются на соответствующую кривую

если центральная часть круга имеет сплошной цвет, то можно использовать подход, упомянутый в ответе Виторино. Если это не сплошной цвет (то есть фон страницы-это градиент или изображение, которое нужно показать), это не поможет. Этот в этом случае можно использовать следующие подходы.

Использование Изображения Маски:

этот подход использует изображение круговой маски для маскировки внутренней части круга. Это делает его похожим на то, что только граница имеет градиент, примененный к ней. The недостаток эта функция в настоящее время поддерживается только в WebKit работает браузеры.

.border-gradient-mask {
  height: 200px;
  width: 200px;
  border-radius: 50%;
  background-image: linear-gradient(to bottom left, #7B73A4 0%, #150E5E 100%);
  -webkit-mask-image: radial-gradient(circle at center, transparent 57%, white 58%);
  mask-image: radial-gradient(circle at center, transparent 57%, white 58%);
}
body {
  background: radial-gradient(circle at center, sandybrown, chocolate);
}

<div class="border-gradient-mask"></div>

используя форму или маску SVG:

другой подход-использовать SVG circle элемент для создания круга, а затем присвоить градиент stroke собственность. Градиент также имеет gradientTransform применяется к нему, потому что это единственный способ получения угловых линейных градиентов с SVG.

.border-gradient-svg {
  position: relative;
  height: 200px;
  width: 200px;
  border-radius: 50%;
}
.border-gradient-svg svg {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
}
.border-gradient-svg circle {
  fill: transparent;
  stroke: url(#grad);
  stroke-width: 8;
}
body {
  background: radial-gradient(circle at center, sandybrown, chocolate);
}

<div class="border-gradient-svg">
  <svg viewBox="0 0 100 100">
    <defs>
      <linearGradient id="grad" gradientUnits="objectBoundingBox" gradientTransform="rotate(135 0.5 0.5)">
        <stop offset="0%" stop-color="#7B73A4" />
        <stop offset="100%" stop-color="#150E5E" />
      </linearGradient>
    </defs>
    <circle r="46" cx="50" cy="50" />
  </svg>
</div>

то же самое можно достигается с помощью SVG mask также. Все, что нужно, это создать маску с двумя circle элементы, заполните больший круг белым, меньший круг черным, а затем примените маску к нашему оригиналу circle элемент. Область, занимаемая меньшим кругом (с черной заливкой), будет прозрачной.

.border-gradient-svg {
  position: relative;
  height: 200px;
  width: 200px;
  border-radius: 50%;
}
.border-gradient-svg svg {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
}
.border-gradient-svg .grad-border {
  fill: url(#grad);
  mask: url(#masker);
}
body {
  background: radial-gradient(circle at center, sandybrown, chocolate);
}

<div class="border-gradient-svg">
  <svg viewBox="0 0 100 100">
    <defs>
      <linearGradient id="grad" gradientUnits="objectBoundingBox" gradientTransform="rotate(135 0.5 0.5)">
        <stop offset="0%" stop-color="#7B73A4" />
        <stop offset="100%" stop-color="#150E5E" />
      </linearGradient>
      <mask id="masker" x="0" y="0" width="100" height="100">
        <circle r="50" cx="50" cy="50" fill="#fff" />
        <circle r="42" cx="50" cy="50" fill="#000" />
      </mask>
    </defs>
    <circle r="50" cx="50" cy="50" class="grad-border"/>
  </svg>
</div>

Использование Пути Клипа:

другим подходом к созданию этого было бы использование clip-path (С inline SVG) с clip-rule значение evenodd. преимущество раствора клип путь над другими заключается в том, что это вызовет эффекты при наведении только при наведении на область (а не прозрачный). The недостаток это то, что IE не поддерживает пути клипа (даже с SVG).

.border-gradient-clip {
  height: 200px;
  width: 200px;
  border-radius: 50%;
  background-image: linear-gradient(to bottom left, #7B73A4 0%, #150E5E 100%);
  -webkit-clip-path: url(#clipper);
  clip-path: url(#clipper);
}
body {
  background: radial-gradient(circle at center, sandybrown, chocolate);
}

<svg width="0" height="0">
  <defs>
    <clipPath id="clipper" clipPathUnits="objectBoundingBox">
      <path d="M0,0.5 a0.5,0.5 0 1,0 1,0 a0.5,0.5 0 1,0 -1,0z M0.08,0.5 a0.42,0.42 0 1,0 0.84,0 a0.42,0.42 0 1,0 -0.84,0z" clip-rule="evenodd" />
    </clipPath>
  </defs>
</svg>
<div class="border-gradient-clip"></div>