具有不同颜色扇区的 div/图像周围的圆形边框

Question

我正在尝试在图像周围应用圆形边框，同时使其具有多个不同颜色的扇区。期望的输出是这样的：

在下面的 sn-p 中，我尝试使用来自 here 的信息来实现这一点，但修改和调试代码似乎不是很容易。即使有多种解决方案，我也建议使用渐变，因为它不需要多个元素（也许代价是不够灵活？）。

有没有办法达到同样的效果，也许是更优雅和可定制的方式？谢谢！

注意：图片来自概念验证图片，而不是实际网站

.profile-info-container {
  background-color: white;
  margin: 20px 10px;
  min-height: 300px;
  position: relative;
  text-align: center;
  height: auto;
  width: 100%;
  display: grid;
}

.profile-info-container::after {
  content: '';
  border: 2px solid #7EA2BC;
  border-radius: 10px;
  grid-row: 2 / 4;
  grid-column: 1;
}

.profile-info-image {
  transform: rotate(45deg);
  border-radius: 100%;
  height: auto;
  margin: auto;
  width: 50%;
  border: 10px solid transparent;
  background-size: 100% 100%, 50% 50%, 50% 50%, 50% 50%;
  background-repeat: no-repeat;
  background-image: 
    linear-gradient(white, white), 
    linear-gradient(60deg, red 36%, red 30%), 
    linear-gradient(120deg, yellow 36%, yellow 30%), 
    linear-gradient(240deg, blue 36%, blue 30%);
  background-position: center center, left top, right top, left bottom, right bottom;
  background-origin: content-box, border-box, border-box, border-box, border-box;
  background-clip: content-box, border-box, border-box, border-box, border-box;
  grid-row: 1 / 3;
  grid-column: 1;
}

h2 {
  grid-row: 3;
  grid-column: 1;
}

.profile-info-image img {
  transform: rotate(-45deg);
  border: 1px solid #7ea2bc;
  border-radius: 100%;
  height: 100%;
  width: 100%;
}

.half {
  width: 50%;
}

<div class="half">
  <div class="profile-info-container">
    <div class="profile-info-image">
      <img src="https://www.ibts.org/wp-content/uploads/2017/08/iStock-476085198.jpg" />
    </div>
    <h2>John Doe</h2>
  </div>
</div>

Answer 1

对于这种特殊情况，我只想如下所示

.profile-info-container {
  background-color: white;
  margin: 20px 10px;
  min-height: 300px;
  text-align: center;
  display: grid;
}

.profile-info-container::before {
  content: '';
  border: 2px solid #7EA2BC;
  border-radius: 10px;
  grid-row: 2 / 4;
  grid-column: 1;
}

.profile-info-image {
  border-radius: 100%;
  width: 50%;
  margin:auto;
  border: 10px solid transparent;
  border-top-color:red;
  background:
    linear-gradient(to right,blue 50%,yellow 0) /*half blue, half yellow*/
    top / 100% 50% /*at the top, width:100% height:50%*/ 
    no-repeat border-box;
  grid-row: 1 / 3;
  grid-column: 1;
}

h2 {
  grid-row: 3;
  grid-column: 1;
}

.profile-info-image img {
  border: 1px solid #7ea2bc;
  border-radius: 100%;
  height: 100%;
  width: 100%;
  display:block;
}

.half {
  width: 50%;
}

<div class="half">
  <div class="profile-info-container">
    <div class="profile-info-image">
      <img src="https://www.ibts.org/wp-content/uploads/2017/08/iStock-476085198.jpg" />
    </div>
    <h2>John Doe</h2>
  </div>
</div>