计算渐变背景DIV上方元素的匹配背景色

核心思路是让箭头和面板共享同一个渐变背景，通过CSS继承和定位实现自动颜色匹配，同时保留箭头的白色边框。

实现步骤 #

1. 调整HTML结构，将箭头和面板放入同一个容器，使两者共享渐变背景。
2. 利用CSS inherit 属性让箭头继承容器的渐变背景，确保颜色与面板对应位置一致。
3. 通过伪元素实现箭头的白色边框，解决clip-path无法直接加边框的问题。

完整代码 #

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>
    <div class="label">
      <span>MENU ITEM</span>
      <div class="panel-container">
        <div class="arrow"></div>
        <div class="panel"></div>
      </div>
    </div>
  </li>
</ul>

CSS #

ul, li {
  list-style: none;
  margin: 0;
  padding: 0;
}
ul {
  width: 600px;
  margin: 0 auto;
  background: #369;
}
ul > li {
  color: #fff;
  padding: 5px 10px;
  display: inline-block;
}
div.label {
  position: relative;
}
.panel-container {
  position: absolute;
  top: 38px;
  left: 0;
  background: linear-gradient(135deg, #579AD1 0%, #1F679D 100%);
  min-width: 320px;
  box-shadow: 0px 0px 9.5px 0.5px rgba(0, 0, 0, 0.24);
}
.arrow {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 20px;
  background: inherit; /* 继承容器的渐变背景 */
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  z-index: 1;
}
/* 白色边框实现：通过伪元素放大并加边框，下层显示 */
.arrow::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  background: inherit;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  z-index: -1;
  border: 1px solid #fff;
}
.panel {
  height: 120px;
  padding-top: 20px; /* 为箭头预留空间 */
}

JavaScript #

$(document).ready(function(){
  $('.panel-container').on('click', function(){
    $(this).css('margin-left', '-200px');
  }).on('contextmenu', function(e){
    $(this).css('width', '600px');
    e.preventDefault();
  });
});

方案优势 #

• 无需手动计算渐变颜色，面板移动或宽度变化时，箭头颜色自动与对应位置匹配。
• 保留了箭头的白色边框效果，且实现方式简洁。
• 渐变背景仅定义一次，避免重复代码。

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