本文介绍了有没有人告诉我，如果我想要一个顶部的三角形而不是底部的三角形，这里需要做哪些修改？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">.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%。
您还需要将最后两个渐变的方向从"；更改为顶部"；，再更改为底部"；，这样箭头将指向上方。
最后，您还应在"；箭头宽度"；var的高度处添加"；padding-top"；，以避免图像大小损失太多。
数据-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>这篇关于有没有人告诉我，如果我想要一个顶部的三角形而不是底部的三角形，这里需要做哪些修改？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！