html - Windows 7 Aero 配置文件图像样式

Question

我想知道是否可以仅使用 CSS 复制 Windows 7 Aero styles for Profile Images .

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

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>

这使得顶部和底部边框略微 flex ，使它们呈现出我想要的“胖乎乎”的外观。但是即使我知道 border-radius 定义使左/右相同(它只是上面的相反)我找不到将它们应用于相同“形状”的方法".

然后，考虑形状 — 由于我的研究对首选方法没有多大帮助 — 我认为我可以改用 clip-path。我认为我每边都需要 4 个点，在 Clippy 的帮助下我想到了这个:

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>

Didn't give much thought regarding the coordinates :P

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

那么，是否可以仅使用 CSS 来实现这一点？我宁愿不必处理路径裁剪或 mask ，但如果没有其他选择，那就去吧:)

Answer 1

我发现这个问题很有趣，唯一可行的方法似乎是使用 clip-path，希望这就是您要找的东西

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>