Windows 7 Aero 配置文件图像样式 [英] Windows 7 Aero Profile Image style

问题描述

我想知道是否可以仅使用 CSS 复制 Windows 7 Aero 样式的个人资料图像.

I was wondering if it would be possible to replicate only with CSS the Windows 7 Aero styles for Profile Images.

内部部分很简单，我会跳过它的问题，但对于外边界，这是我能做的最好的:

The inner part is simple and I'll skip it for the question but for the outer border, this was the best I could make:

wrapper {
  display: flex;
  justify-content: center;
  margin-top: 2.5%;
}

.box {
  border: 1px solid #000;
  background-image: linear-gradient(-225deg, #fff 0%, rgba(255,255,255,0) 40%, rgba(0,255,255,0) 60%, cyan 100%),linear-gradient(45deg, #3023AE 0%, #f09 100%);
  border-radius: 50% 50% 50% 50% / 10% 10% 10% 10%;
  width: 350px;
  height: 350px;
}

<wrapper>
  <div class="box"></div>
</wrapper>

这使得顶部和底部边界非常轻微弯曲，使它们成为胖乎乎的"看我要找.但即使我知道 border-radius 定义使左/右相同(它只是上面那个的相反)我找不到一种方法将它们应用于相同的;形状".

Which makes the top and bottom borders very slightly curved giving them this "chubby" look I'd be looking for. But even though I know the border-radius definition to make the same to the left/right (it's just the reverse of the one above) I couldn't find a way apply them to the same "shape".

然后，考虑形状——由于我的研究对首选方法没有太大帮助——我认为我可以使用 clip-path 代替.我想我需要每边 4 分，在 Clippy 的帮助下我想出了这个:

Then, thinking about shapes — and since my researches didn't help much with the preferred method — I thought I could use a clip-path instead. I thought I'd need 4 points on each side and with help of Clippy I came up with this:

wrapper {
  display: flex;
  justify-content: center;
  margin-top: 2.5%;
}

.box {
  border: 1px solid #000;
  background-image: linear-gradient(-225deg, #fff 0%, rgba(255,255,255,0) 40%, rgba(0,255,255,0) 60%, cyan 100%),linear-gradient(45deg, #3023AE 0%, #f09 100%);
  clip-path: polygon(24% 0, 46% 0, 57% 0, 80% 0, 100% 10%, 100% 40%, 100% 59%, 100% 90%, 80% 100%, 65% 100%, 48% 100%, 30% 100%, 0 90%, 0 59%, 0 30%, 0 10%);
  width: 350px;
  height: 350px;
}

<wrapper>
  <div class="box"></div>
</wrapper>

没有考虑太多坐标:P

理论上——如果我对 SVG(或一般的几何图形)有任何好处——它会起作用，但不仅我无法再次将这些边界复制到两侧，而且它们都是平面且没有颜色.

In theory — and if I was any good with SVG (or geometry in general) — it would work but not only I couldn't reproduce these borders to the sides once again, they were all flat and without colour.

那么，是否可以仅使用 CSS 来完成此操作?我宁愿不必处理路径剪裁或遮罩，但如果没有其他选择，那就去做吧:)

So, would it be possible to accomplish this only with CSS? I rather not have to deal with path clipping or masking, but if there's no other alternative, go for it :)

推荐答案

我发现这个问题很有趣，唯一可行的方法是使用 clip-path，希望这就是你寻找

I found the question quite interesting and the only way that seemed to work was using clip-path, hope it's what you're looking for

wrapper {
  display: flex;
  justify-content: center;
  margin-top: 2.5%;
}

.box {
  background-image: linear-gradient(-225deg, #fff 0%, rgba(255, 255, 255, 0) 40%, rgba(0, 255, 255, 0) 60%, cyan 100%), linear-gradient(45deg, #3023AE 0%, #f09 100%);
  clip-path: url(#svgClip);
  width: 350px;
  height: 350px;
  object-fit: cover;
  display: block;
}

<wrapper>
  <div class="box"></div>
</wrapper>

<svg width="0" height="0">
    <clipPath id="svgClip" clipPathUnits="objectBoundingBox">
        <path d="M.067.067C.1676 0 .8379 0 .9385.067C1.0055.1676 1.0055.8379.9385.9385C.8379 1.0055.1676 1.0055.067.9385C0 .8379 0 .1676.067.067"></path>
    </clipPath>
</svg>

这篇关于Windows 7 Aero 配置文件图像样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！