css Question posted in
Some basic documentation can be found here.

How to XOR shapes with CSS only?

In the example below, the two XORed bars do not completely cancel out when perfectly aligned. You can see their outline.

How to make the outline disappear, which is what a correct XOR should do?

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    filter: invert(100%);
    position: relative;
    height: 100vh;
}

.a {
    position: absolute;
    width: 250px;
    height: 50px;
    transform: rotate(45deg);
    background: white;
}

.b {
    position: absolute;
    width: 250px;
    height: 50px;
    transform: rotate(-45deg);
    mix-blend-mode: difference;
    background: white;
    animation: spin 1s infinite alternate;
}

@keyframes spin {
  0% { transform: rotate(30deg) }
  50% { transform: rotate(45deg) }
  100% { transform: rotate(60deg) }
}
<div class="container">
  <div class="a"></div>
  <div class="b"></div>
 </div>
Tags:

2

Answers


  1. 0

    This must be qualified as a workaround, not as a full answer. It does "make the outline disappear" as requested in the question, albeit not in the same configuration.

    If you remove the transformation, as noticed by @SyndRain, the XOR works, even in animation (modified to show the fully XORed stated longer):

    .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    filter: invert(100%);
    position: relative;
    height: 100vh;
}

.a {
    position: absolute;
    width: 250px;
    height: 50px;
    background: white;
}

.b {
    position: absolute;
    width: 250px;
    height: 50px;
    mix-blend-mode: difference;
    background: white;
    animation: spin 2s infinite alternate;
}

@keyframes spin {
  0% { transform: rotate(0deg) }
  50% { transform: rotate(0deg) }
  100% { transform: rotate(45deg) }
}
    <div class="container">
  <div class="a"></div>
  <div class="b"></div>
 </div>
    Login or Signup to reply.
  2. 0

    Adding black outlines on both div appears to fix the problem for me. (At least on Chrome, Edge, and FF)

    outline: 2px solid black;
outline-offset:-1px;

    Note that I’ve added an animation delay to show the weird border disappeared.

    .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  filter: invert(100%);
  position: relative;
  height: 100vh;
}

.a {
  position: absolute;
  width: 250px;
  height: 50px;
  transform: rotate(45deg);
  background: white;
  outline: 2px solid black;
  outline-offset: -1px;
}

.b {
  position: absolute;
  width: 250px;
  height: 50px;
  transform: rotate(45deg);
  mix-blend-mode: difference;
  background: white;
  outline: 2px solid black;
  outline-offset: -1px;
  animation: spin 1s infinite alternate;
  animation-delay: 1s;
}

@keyframes spin {
  0% {
    transform: rotate(30deg)
  }
  50% {
    transform: rotate(45deg)
  }
  100% {
    transform: rotate(60deg)
  }
}
    <div class="container">
  <div class="a"></div>
  <div class="b"></div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search