Windows 7 Aero Profile Image style

Question

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;
}

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

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;
}

Didn't give much thought regarding the coordinates :P

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.

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 :)

user_8885988 · Answer

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;
}

Windows 7 Aero Profile Image style

1 Answers