有没有人告诉我，如果我想要一个顶部的三角形而不是底部的三角形，这里需要做哪些修改？

.a {
  /* you can change this variable */
  --arrow-width: 30px;
  
  width: 100%;
  height: 300px;
  --mask: linear-gradient(#000, #000) 0 0/100% calc(100% - var(--arrow-width)) no-repeat, 
          linear-gradient(to top right, transparent 0 50%, #000 50.1% 100%) calc(50% - var(--arrow-width) / 2) 100% / var(--arrow-width) var(--arrow-width) no-repeat, 
          linear-gradient(to top left, transparent 0 50%, #000 50.1% 100%) calc(50% + var(--arrow-width) / 2) 100% / 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;
}

<div class="a"></div>

有没有人告诉我，如果我想要一个顶部的三角形而不是底部的三角形，这里需要做哪些更改？

推荐答案

基本上您需要更改各种渐变的位置。

第一个箭头的垂直位置应从箭头宽度开始。

其他两个垂直位置都应设置为0，而不是100%。

您还需要将最后两个渐变的方向从&quot；更改为顶部&quot；，再更改为底部&quot；，这样箭头将指向上方。

最后，您还应在&quot；箭头宽度&quot；var的高度处添加&quot；padding-top&quot；，以避免图像大小损失太多。

数据-lang=”js”数据-隐藏=”假”数据-控制台=”真”数据-巴贝尔=”假”>

.a {
  /* you can change this variable */
  --arrow-width: 30px;
  padding-top: var(--arrow-width);
  margin-top: calc(var(--arrow-width) * -1); /* added to make the image aligned to the top */
  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;
}

<div class="a"></div>