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

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>

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

Round border around div/image with different color sectors

html

css

gradient

border