CSS маска на элементе без изображения?

Question

Эта проблема:
У меня есть набор "вкладок" для навигации, в который я хочу добавить класс "маски" к активной вкладке. Моя цель - показать цвет фона и / или фоновое изображение ТЕЛА, но только с этим "активная" вкладка. Поскольку фоновая страница тела динамична и постоянно меняется, я не могу просто добавить цвет фона на "активную вкладку" и назвать его днем. Я должен использовать другую технику (javascript - последнее средство, я хочу сделать это только с CSS).

ТРЕБОВАНИЯ:

• Я не могу использовать изображение для маски, потому что ширины "табуляции" отображаются css с flexbox и растягиваются по всей странице.
• Я должен использовать решение, которое маскирует только элементы... В этом случае: <div class="mask"></div>
• Я не могу изменить структуру HTML ниже... Я должен работать с этим макетом.

---

Это возможно с маской CSS или есть лучший способ добиться этого с помощью другой техники CSS?

Скрипка: https://jsfiddle.net/oneeezy/7mj8voL8/

---

КОД:

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Body */
body { background-color: rgb(0, 121, 191); }

/* Header */
h1 { color: white;  }
header { background-color: rgba(0,0,0, .15); padding: 20px 20px 0; }
header nav { display: flex; }
header nav div { flex: 1; color: white; background: rgba(0,0,0, .1); margin: 10px 10px 0; padding: 10px; border-radius: 10px 10px 0 0; }

/* Mask (without image?) */
header nav div.mask { background: rgba(0,0,0, .1); } /* Can mask reveal background color? */

/* Main */
main { padding: 20px 20px 0; }
h2 { color: rgba(0,0,0, .54); }

<header>
  <h1>Logo</h1>
  
  <nav>
    <div class="mask">Link (mask)</div>
    <div class="">Link</div>
    <div class="">Link</div>
  </nav>
</header>

<main>
  <h2>CSS Masking</h2>
  <p>Possible to css mask without an image? Hmmmmmm.......</p>
  
  <p>I want to reveal the color of the BODY's background on the DIV that has the class "mask"</p>
</main>

Answer 1

Если всегда есть активный элемент и только один активный элемент, вы можете установить на него тень, которая получит желаемый эффект (вместо фона в заголовке).

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Body */
body { background: repeating-linear-gradient(90deg, lightblue 0px, lightgreen 100px); }

/* Header */
h1 { color: white;  }
header {  padding: 20px 20px 0; }
header nav { display: flex; }
header nav div { flex: 1; color: white; background: rgba(0,0,0, .1); margin: 10px 10px 0; padding: 10px; border-radius: 10px 10px 0 0; }

/* create a shdow on the underlying element, reset the default bkg */
header nav div.mask { 
  box-shadow: 0px -1000px 0px 1000px rgba(0,0,0, .1); 
  background-color: transparent;
} 

/* Main */
main { padding: 20px 20px 0; }
h2 { color: rgba(0,0,0, .54); }

<header>
  <h1>Logo</h1>
  
  <nav>
    <div class="mask">Link (mask)</div>
    <div class="">Link</div>
    <div class="">Link</div>
  </nav>
</header>

<main>
  <h2>CSS Masking</h2>
  <p>Possible to css mask without an image? Hmmmmmm.......</p>
  
  <p>I want to reveal the color of the BODY's background on the DIV that has the class "mask"</p>
</main>