How to change colour of overlapped area of 2 divs using css?-CodePudding

I am trying to achieve a design, in which 2 divs overlap. However, the colour of overlapped area needs to be changed.

I tried to explore clipath\polygon. But I am not sure if that's the right direction, as I was not able to achieve using them.

Full code: JS Fiddle Example of this code

.container {
  width: 300px;
  height: 300px;
  background: lightblue;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.div1 {
  position: absolute;
  width: 200px;
  height: 200px;
  background: lightyellow;
}

.div2 {
  position: absolute;
  width: 300px;
  height: 300px;
  background: rgb(234 54 67 / 50%);
  transform: rotate(30deg);
  left: 130px;
}

<div >
  <div ></div>
  <div ></div>
</div>

CodePudding user response：

simply change background of div2 in css like this and it changes to white:

.div2 {
  position: absolute;
  width: 300px;
  height: 300px;
  background: white;
  transform: rotate(30deg);
  left: 130px;
}

CodePudding user response：

One way would be to use the mix-blend-mode property https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode However, it may be difficult to get the overlapping area to be the color you want.

.square1, .square2 {
  position: fixed;
  width: 100px;
  height: 100px;
}

.square1 {
  background-color: green;
  top: 10px;
  left: 10px;
}

.square2 {
  background-color: blue;
  /* there are a bunch of different options */
  mix-blend-mode: difference;
  top: 60px;
  left: 60px;
}

<div class='square1'></div>
<div class='square2'></div>

Other than that, you are going to need a polygon clipping algorithm, which is quite complicated. https://www.geeksforgeeks.org/polygon-clipping-sutherland-hodgman-algorithm/