前提
我目前正在几个月前开始一个重新品牌项目的IT公司工作。作为公司网络实践的负责人，我与设计协会的负责人肩并肩工作，以确保公司的新品牌反映了我们对世界的地位和真正的潜力。作为这种性质的所有项目，我们与设计团队定期举行会议，以审查他们的设计和预期功能。
挑战
在其中一次会议中，设计团队提出了以下部分：
一见钟情，它看起来像是常规的设计，直到他们解释了改变一切的东西。这个想法是 所有的化身（正如它们打算向人们展示图片）梯度和涂鸦作为背景）；这意味着每个化身背景在每个设备中看起来都不同，因为它们的位置会根据视口大小而有所不同。
那时，我们还没有意识到设计团队在我们面前提出的挑战之后，直到我们开始集思广益地涉及如何实现它，我们认为这并不是那么简单。这个组成部分引起了我的注意，因为我以前从未建造过这样的组件，所以我自己就拿了它。
在跳入技术解决方案之前，值得一提的是与之相关的一些相关事实：
- 该组件在几页中使用，其中一些组件（例如六边形）不同。
- 该形状用于另一个网站组件。
解决方案
现在让我们谈谈解决方案；为此，我们将需要2个组件：
- 头像组件
- 头像网格组件
但是首先，如果您像我一样，一个绝望的人，您可以看一下implemented use case here。现在开始。
头像组件
我们的目标是创造一个人从形状中脱颖而出的视觉效果。为了实现这一点，我需要3层：
后层 - 形状容器
对于此层，我需要考虑以下内容：
- 该解决方案应允许管理形状比率，无论其尺寸如何（这样，组件响应率将易于处理）
- 该解决方案应允许使用形状并夹紧它外部的任何东西，因为形状在另一个Web组件中使用（创建新形状将是一种替代方案，但在网格中使用它时会带来另一个复杂性带走它的乐趣）。 经过一些阅读/研究/编码之后，我想出了CSS代码的作品：
.masked {
mask-image: url(https://atwebsite.blob.core.windows.net/images/hexagon.svg), linear-gradient(#fff,#fff);
mask-size: calc(100% - 20px) calc(100% - 20px), 120%;
mask-composite: exclude;
mask-origin: content-box;
mask-repeat: no-repeat;
mask-position: center;
}
此CSS Tecnique允许采取几种形状（在这种情况下，我们使用的是六边形和梯度绘制的正方形），并夹紧元素的任何部分不碰撞。
这种方法非常适合上述解决方案。
中层 - 图片容器
第二层将持有图片，这里没有太多的事情，只有通常的CSS。我对图片进行了缩放，所以它总是比从形状效果出来所需的形状大。
前层 - 形状容器的下半部
您可以想象，我只是简单地重复使用了第一层内置的形状容器，但还添加了一个父（容器），这样我就可以处理图片的一部分，我想从底部到顶部覆盖。<<<<<<<<<< /p>
下面您会找到一支具有完整实现此组件的笔和几个可以使用的CSS变量。
谢谢
就是这样，对于我们的第一部分，我将很快写下它的第二部分（网格组件）。希望您发现这篇文章有用，如果您想连接，可以在LinkedIn
中找到我