分层的不透明元素共同构成新的颜色

Question

我有一个设计：

​

​

我想有两个svg多边形重叠。是否有可能有多边形2，当重叠的其他元素，创造一个更深的颜色，而重叠的白色创造相同的颜色与非不透明的元素？

​

​

更新

标记是不相关的，因为我只是对颜色值感兴趣。当背景颜色为白色时，我想知道与rgb(0, 92, 150)匹配的不透明值(alpha)的颜色值。

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解决方案，计算alpha所需的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，所以我的alpha值是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>

​