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

Question

.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>

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

Answer 1

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

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

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

您还需要将最后两个渐变的方向从“到顶部”更改为“到底部”，以便箭头指向上方。

最后，您还应该添加“padding-top”和“arrow width”变量的高度，以免丢失太多图像大小。

.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>

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

Does anybody tell me what changes need to be done here if I want a triangle at the top not bottom?

html

css

mask