如何让HTML中带角度的半透明元素交叉区域完全不透明？

针对你遇到的带角度半透明元素交叉区域无法完全不透明的问题，这里提供几个可行的CSS/JS实现方案：

方案一：CSS混合模式配合伪元素 #

核心思路是利用mix-blend-mode的颜色混合特性，抵消透明度叠加的影响：

<div class="container">
  <div class="shape shape-1"></div>
  <div class="shape shape-2"></div>
</div>

.container {
  position: relative;
  width: 400px;
  height: 400px;
  background: #fff;
}

.shape {
  position: absolute;
  width: 200px;
  height: 200px;
  mix-blend-mode: multiply;
}

.shape-1 {
  top: 50px;
  left: 50px;
  background: rgba(255, 0, 0, 0.5);
  transform: rotate(15deg);
}

.shape-2 {
  top: 100px;
  left: 100px;
  background: rgba(0, 0, 255, 0.5);
  transform: rotate(-15deg);
}

/* 关键：用白色伪元素的screen混合模式反向修正交叉区域透明度 */
.container::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #fff;
  mix-blend-mode: screen;
}

原理：multiply模式会让两个半透明区域的颜色相乘，交叉区域透明度变为0.75；再叠加screen模式的白色背景，会把交叉区域的透明度拉回1，同时保留单个元素区域的半透明效果。

方案二：SVG路径生成交叉区域 #

SVG天生擅长处理矢量图形的路径运算，能直接生成两个带角度形状的交叉区域，然后单独填充不透明颜色：

<svg width="400" height="400" viewBox="0 0 400 400">
  <defs>
    <!-- 定义两个带旋转角度的矩形路径 -->
    <path id="shape1" d="M70,70 L270,70 L270,270 L70,270 Z" transform="rotate(15 170 170)"/>
    <path id="shape2" d="M120,120 L320,120 L320,320 L120,320 Z" transform="rotate(-15 220 220)"/>
    <!-- 利用evenodd填充规则自动生成交叉区域路径 -->
    <path id="intersection" d="M70,70 L270,70 L270,270 L70,270 Z M120,120 L320,120 L320,320 L120,320 Z" fill-rule="evenodd"/>
  </defs>
  
  <!-- 先绘制两个半透明形状 -->
  <use href="#shape1" fill="rgba(255,0,0,0.5)"/>
  <use href="#shape2" fill="rgba(0,0,255,0.5)"/>
  <!-- 再用不透明颜色覆盖交叉区域 -->
  <use href="#intersection" fill="rgb(128,0,128)"/> <!-- 这里用两个颜色的混合色，可按需调整 -->
</svg>

原理：fill-rule="evenodd"会让重叠的路径区域被填充，正好对应两个形状的交叉部分，直接给这个区域填充不透明颜色就能覆盖原来的半透明叠加层。

方案三：Canvas动态绘制与合成模式 #

用Canvas的绘图API和合成模式，精准控制交叉区域的显示效果：

<canvas id="canvas" width="400" height="400"></canvas>

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// 绘制第一个旋转的半透明矩形
ctx.save();
ctx.translate(170, 170); // 旋转中心
ctx.rotate((15 * Math.PI) / 180);
ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
ctx.fillRect(-100, -100, 200, 200);
ctx.restore();

// 绘制第二个旋转的半透明矩形
ctx.save();
ctx.translate(220, 220);
ctx.rotate((-15 * Math.PI) / 180);
ctx.fillStyle = 'rgba(0, 0, 255, 0.5)';
ctx.fillRect(-100, -100, 200, 200);
ctx.restore();

// 只在交叉区域绘制不透明颜色
ctx.globalCompositeOperation = 'source-atop';
ctx.save();
ctx.translate(170, 170);
ctx.rotate((15 * Math.PI) / 180);
ctx.fillStyle = 'rgb(255,0,0)'; // 或者用混合色
ctx.fillRect(-100, -100, 200, 200);
ctx.restore();

// 恢复默认合成模式
ctx.globalCompositeOperation = 'source-over';

原理：source-atop合成模式会让新绘制的内容只显示在已有画布内容的重叠区域，所以重新绘制第一个形状的不透明版本时，只会覆盖交叉区域，完美实现需求。

内容的提问来源于stack exchange，提问作者Han Han