Добавление границы с 2 цветами к круглому изображению

Question

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

Я знаю, что могу контролировать все стороны границы с помощью border-top или border-bottom. Однако так как изображение имеет радиус 50%. Ширина границы начинается с толстой, а затем уменьшается по мере достижения середины.

Даже когда я добавил border-left и border-right, два цвета не соединяются равномерно.

.testImage {
    border-radius: 50%;
    border-top: 7px solid red;
    border-bottom: 7px solid blue;
}

<img src="https://via.placeholder.com/175" class="testImage" alt="img=1" />

Answer 1

Это может быть достигнуто с помощью небольшой хитрости, оборачивая ваше изображение в контейнер. Свойство border-radius немного вводит в заблуждение, поэтому вам нужно подумать о четырех сторонах и посмотреть, как можно создать тот же эффект.

Сначала убедитесь, что у вас есть эффект двойной границы.

.image-border {
  display: inline-block; /* Fits the wrapper to the size of the image */
  overflow: hidden; /* Keeps the image inside the container */
  border-radius: 50%;
  border-width: 8px;
  border-style: solid;
  border-color: red red blue blue; /* Define colosr for top, right, bottom, and left sides */
}

.image-border > img {
  display: block; /* Prevent baseline alingment (space below image) */
}

<div class="image-border">
  <img src="https://via.placeholder.com/175" alt="img=1" />
</div>

Теперь единственная проблема заключается в том, что граница имеет «смещение» на 45 градусов. Вы можете легко исправить это с помощью преобразований:

.image-border {
  display: inline-block; /* Fits the wrapper to the size of the image */
  overflow: hidden; /* Keeps the image inside the container */
  border-radius: 50%;
  border-width: 8px;
  border-style: solid;
  border-color: red red blue blue; /* Define colosr for top, right, bottom, and left sides */
  transform: rotate(-45deg); /* Make the borders look aligned to the horizontal axis */
}

.image-border > img {
  display: block; /* Prevent baseline alingment (space below image) */
  transform: rotate(45deg); /* Cancel the container's transform */
}

<div class="image-border">
  <img src="https://via.placeholder.com/175" alt="img=1" />
</div>

Существуют другие методы, такие как градиент, установленный в качестве фонового изображения, с padding или прозрачной рамкой, чтобы показать его. Это забавный трюк, поэтому я подумал, что вы можете узнать больше из этого!

Answer 2

Фоновый метод с несколькими строками кодов:

.testImage {
  border-radius: 50%;
  padding: 7px;
  background: linear-gradient(red 50%, blue 0);
}

<img src="https://via.placeholder.com/175" class="testImage" alt="img=1" >

Answer 3

div.container {
  position: relative;
  
  display: inline-block;
}

div.half__circle {
  width: 100px;
  height: 50px;
  
  background: red;
  
  border-radius: 50px 50px 0 0;
}

div.half__circle:nth-of-type(1) {
  background: red;  
  border-radius: 50px 50px 0 0;
}

div.half__circle:nth-of-type(2) {
  background: blue;  
  border-radius: 50px 50px 0 0;
  
  transform: rotateZ(180deg);
}

.image {
  width: calc(100% - 30px);
  height: calc(100% - 30px);

  position: absolute;
  top: 15px;
  bottom: 15px;
  left: 15px;
  right: 15px;
}

<div class="container">
  <div class="half__circle"></div>
  <div class="half__circle"></div>
  <img class="image" src="https://s3.amazonaws.com/uploads.striking.ly/page/images/custom/dUET9v8VSJquJGPLePed_tsquared_no_angle.png" alt="" />
</div>