如何实现带渐变背景的CSS双箭头形状？参考单箭头渐变边框及内阴影案例

嘿，我刚好折腾过类似的效果，给你一个实用的方案，用CSS的clip-path结合多层元素来实现，灵活度拉满还方便调整：

核心思路 #

我们用两层元素叠加来分工：

• 外层元素负责渲染渐变边框和两侧箭头的轮廓
• 内层元素负责承载内容、设置内部背景和内阴影
  同时用CSS变量统一控制关键参数，后续改样式不用到处找代码~

完整代码示例 #

HTML结构

<div class="arrow-box">
  <div class="arrow-box__content">
    这里放你的内容哦！
  </div>
</div>

CSS样式

/* 全局变量，一键调整所有关键样式 */
:root {
  --arrow-size: 28px;       /* 箭头的长度 */
  --border-width: 2px;      /* 边框宽度 */
  --border-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* 边框渐变 */
  --inner-bg: #ffffff;      /* 内部背景色 */
  --inner-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.12); /* 内阴影 */
}

.arrow-box {
  width: 320px;
  height: 140px;
  position: relative;
  background: var(--border-gradient);
  /* 用clip-path绘制带左右箭头的整体形状 */
  clip-path: polygon(
    0 50%, 
    var(--arrow-size) 0, 
    var(--arrow-size) var(--border-width),
    calc(100% - var(--arrow-size)) var(--border-width), 
    calc(100% - var(--arrow-size)) 0,
    100% 50%, 
    calc(100% - var(--arrow-size)) 100%, 
    calc(100% - var(--arrow-size)) calc(100% - var(--border-width)),
    var(--arrow-size) calc(100% - var(--border-width)), 
    var(--arrow-size) 100%
  );
}

.arrow-box__content {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: var(--inner-bg);
  box-shadow: var(--inner-shadow);
  /* 用clip-path只保留中间内容区域，让外层的边框和箭头显示出来 */
  clip-path: polygon(
    var(--arrow-size) 0, 
    calc(100% - var(--arrow-size)) 0,
    calc(100% - var(--arrow-size)) 100%, 
    var(--arrow-size) 100%
  );
  /* 内容居中，同时避免内容跑到箭头区域 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--arrow-size);
  box-sizing: border-box;
}

效果说明 #

1. 渐变边框：外层元素的背景是渐变，通过clip-path裁剪出带箭头的形状，边框宽度由--border-width控制，箭头部分的边框会自动匹配渐变样式。
2. 内阴影：内层元素的box-shadow: inset属性实现内部阴影，只会作用在中间的内容区域，符合视觉预期。
3. 灵活调整：修改:root里的变量就能快速改变箭头大小、边框样式、内阴影深浅，完全适配不同场景需求。

要是想调整箭头的角度或者形状，只需要修改clip-path里的坐标值就行，比如把箭头改得更尖一点，就调整var(--arrow-size)对应的x轴坐标~

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