Круглая граница вокруг div / изображения с разными цветными секторами - PullRequest
Новая
       27

Круглая граница вокруг div / изображения с разными цветными секторами

1 голос
/ 19 апреля 2019

Я пытаюсь наложить вокруг изображения круглую рамку и в то же время сделать так, чтобы оно имело несколько секторов разных цветов.Желаемый результат будет примерно таким:

enter image description 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>

1 Ответ

4 голосов
/ 19 апреля 2019

Для этого конкретного случая я бы просто хотел, как показано ниже 

.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>
...