Слоистый непрозрачный элемент вместе делает новый цвет

Question

У меня есть дизайн:

Я хочу, чтобы 2 многоугольника SVG перекрывались.Возможно ли, чтобы полигон 2 при перекрытии других элементов создавал более темный цвет, а при перекрытии белого - тот же цвет, что и непрозрачные элементы?

ОБНОВЛЕНИЕ

Разметка не имеет значения, потому что меня интересуют только значения цвета.Я хочу знать значение цвета со значением непрозрачности (альфа), которое соответствует rgb(0, 92, 150), когда цвет фона белый.

body {
  background: white;
}

.container {
  background: rgb(0, 92, 150);
}

.polygon-1 {
  fill: rgb(0, 92, 150);
}

.polygon-2 {
  fill: [a color value that has an alpha that, when it's over white, creates the same color as rgb(0, 92, 150) and creates the darker color effect when it overlays rgb(0, 92, 150)];
}

Я думаю, этот вопрос по сути такой же, какмой.

В соответствии с решением JS, представленным в этом вопросе, для вычисления альфа требуется наименьшее число rgb.В моем случае это 0. Сгенерированное значение rgba равно rgba(0, 92, 150, 1) (без прозрачности).Означает ли это, что этот конкретный цвет не может создать желаемый эффект?

var min, a = (255 - (min = Math.min(r, g, b))) / 255;

В моем случае Math.min(0, 92, 150) равно 0, (255 - 0) / 255 равно 1, поэтому мое альфа-значение оказывается равным 1.Мне нужно, чтобы оно было меньше 1 (хотя бы чуть-чуть).

ОБНОВЛЕНИЕ 2

Для дальнейшего опускания голосов, вот грубая кодовая ручка , чтобы проиллюстрировать мою точку зрения.

Answer 1

Вот как бы я это сделал: Я добавляю третью фигуру: rect вместо синего .container и использую <clipPath>, чтобы обрезать полигоны. В примере я заливаю красным, но вы можете заполнить его любым, что захотите.

Надеюсь, это поможет.

.outer-container {
  background: white;
  padding-top: 10rem;
}

.outer-container * {
  box-sizing: border-box;
}

.container {
  
  width: 300px;
  padding: 4px 10px 25px 10px;
  text-align: center;
  color: white;
  margin: 0 auto;
  position: relative;
}

h3 {
  font-size: 1.5rem;
  font-family: sans-serif;
  font-weight: 300;
  z-index: 10;
  position: relative;
}

svg {
  width: 100%;
  position: absolute;
  top: -5rem;
  left: 0;
  z-index: 1;
}

.polygon-1,
.polygon-2,
.polygon-3{
   fill: rgb(0, 92, 150);
}

<div class="outer-container">
  <div class="container">
    <h3>Education</h3>
    
    <svg viewBox="0 0 100 60">
      <defs>
      <polygon id="p1" points="10,40 72,0 85,25 15,53"></polygon>
      <polygon id="p2" points="10,10 90,25 80,55 25,53"></polygon> 
      <rect id="p3" y="40%" width="100%" height="60%" />
        
       <clipPath id="clip1">
       <use xlink:href="#p1"></use>    
       </clipPath>
       <clipPath id="clip2">
       <use xlink:href="#p3"></use>
       </clipPath>
      </defs>
      <use xlink:href="#p1" class="polygon-1"></use>
      <use xlink:href="#p2" class="polygon-2"></use>
      <use xlink:href="#p3" class="polygon-3"></use>
      <g fill="red">
      <use xlink:href="#p2" clip-path="url(#clip1)"  /> 
      <use xlink:href="#p2" clip-path="url(#clip2)"  />
      </g>
      
    </svg>
  </div>
</div>