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

Question

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

在下面的代码段中，我尝试使用来自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>