Как изменить цвет в месте пересечения объектов?

Question

[Cesar1]

У меня есть два объекта: круг и кнопка.
При наведении на кнопку - она сдвигается на круг и в месте пересечения должна изменить цвет.
Я сделал это через mix-blend-mode, но с помощью него нельзя задать свой цвет на пересечении.
Как можно это реализовать?

https://codepen.io/bogdandomashenko/pen/gOgLrjB

Answer 1

[Даниил Попов]

Немного дополню предыдущий ответ примером:

Код

Разметка

<div class="wrapper">
  
  <div class="button">
    <div class="button__circle">
      <div class="button__circle-shadow"></div>
    </div>
    <div class="button__body">Button</div>
  </div>
  
</div>

Стили (scss)

$circle-size: 50px;
$transition: 0.3s;
$base-shift: translateX(-$circle-size * 0.25);
$hover-shift: translateX(-$circle-size * 0.75);
$circle-color: #F79854;
$button-color: linear-gradient(90deg, #427C33 0%, #6EBC5A 100%);
$blend-color: mix(#F79854, #427C33);

.wrapper {
  width: 500px;
  height: 500px;
  
  display: flex;
  align-content: center;
  justify-content: center;
}

.button {
  $block: &;
  height: $circle-size;
  display: flex;
  cursor: pointer;
  
  &__circle,
  &__circle-shadow {
    height: $circle-size;
    width: $circle-size;
    border-radius: 50%;
  }
  
  &__circle {
    position: relative;
    z-index: 2;
    background: $circle-color;
    overflow: hidden;
  }
  
  &__circle-shadow {
    position: absolute;
    left: 100%;
    background: $blend-color;

    transition: $transition;
    transform: $base-shift;
    
    #{$block}:hover & {
      transform: $hover-shift;
    }
  }
  
  &__body {
    height: $circle-size;
    width: $circle-size * 6;
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    color: white;
    
    background: $button-color;
    border-radius: $circle-size;
    
    transition: $transition;
    transform: $base-shift;
    
    #{$block}:hover & {
      transform: $hover-shift;
    }
  }
}

JSFiddle
Думаю, и svg фильтрами можно решить. В зависимости от необходимого вида на выходе можно попробовать разное. В моем примере будут проблемы с прозрачностями, но это тоже решаемо

Comments

[Cesar1]

спасибо, буду играться

Answer 2

[profesor08]

Просто стилями - никак. Смотри какое свойство используется в исходнике макета, то и используй для mix-blend-mode

Чтоб достичь желаемого эффекта, внутри круга размести другой круг и двигай его. Ну и не забыть про z-index, чтоб у круга он был больше чем у длинной кнопки.