如何修改现有CSS代码实现元素顶部而非底部显示三角形效果

云原生阿岚

2026-9-28

只需要调整.a选择器中--mask变量的三处配置即可实现三角形移到顶部的效果，具体修改点如下：

调整第一个纯色渐变的位置：将原配置0 0/100% calc(100% - var(--arrow-width))改为0 var(--arrow-width)/100% calc(100% - var(--arrow-width))，让主内容区域从顶部空出箭头高度，不再从底部留白。
调整两个三角形渐变的方向：将原to top right改为to bottom right，原to top left改为to bottom left，生成尖角朝下的三角形样式。
调整两个三角形的垂直对齐位置：将两处位置属性值100%（对齐底部）改为0（对齐顶部）。

修改后的完整代码如下：

.a {
  /* you can change this variable */
  --arrow-width: 30px;
  
  width: 100%;
  height: 300px;
  --mask: linear-gradient(#000, #000) 0 var(--arrow-width)/100% calc(100% - var(--arrow-width)) no-repeat, 
          linear-gradient(to bottom right, transparent 0 50%, #000 50.1% 100%) calc(50% - var(--arrow-width) / 2) 0 / var(--arrow-width) var(--arrow-width) no-repeat, 
          linear-gradient(to bottom left, transparent 0 50%, #000 50.1% 100%) calc(50% + var(--arrow-width) / 2) 0 / var(--arrow-width) var(--arrow-width) no-repeat;
  -webkit-mask: var(--mask);
  mask: var(--mask);
  background: url(https://picsum.photos/id/600/360) 50% 50% / cover;
}