Как сделать чтобы блоки не красились при наложении?
Не использовать прозрачность.
Сделать вот так https://jsfiddle.net/hwvgdton/
Для гладкости подберите точки перехода градиента.
И, наверное, вам понадобится pointer-events

div {
  position: relative;
}
div::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to left top, transparent calc(50% - 51px), gray calc(50% - 50px), gray calc(50% + 50px), transparent calc(50% + 51px)),
  linear-gradient(to right top, transparent calc(50% - 51px), gray calc(50% - 50px), gray calc(50% + 50px), transparent calc(50% + 51px));
  opacity: 0.7;
}