1

I am trying to apply a round border around an image and in the same time, to make it have multiple sectors of different colors. The desired output would be something like this:

enter image description here

In the snippet below I tried to achieve this using information from here but it seems like it is not a very easy to modify and debug code. Even if there are multiple solutions out there, I proffered using gradients since it doesn't require multiple elements (maybe with the cost of not being very flexible?).

Is there a way to achieve the same result, maybe in a more elegant and customizable way? Thanks!

Note: the image is from a proof of concept image, not an actual website

.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>
Adrian Pop
  • 1,879
  • 5
  • 28
  • 40

1 Answers1

4

For this particular case I would simply it like below

.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>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415