< Back to Frontend Friday Folks Index

Pythagoras

Highlighted solution (406 characters)
1
<div></div>
2
<style>
3
  body {
4
    display: grid;
5
    place-items: center;
6
    background: #D25B70;
7
  }
8
  div {
9
    position:fixed;
10
    inset:0;
11
    background:conic-gradient(#F6DF96 25%,#F7F3DA 0 75%,#6CB3A9 0) -15px;
12
    clip-path:
13
      polygon(150px 150px,102px 114px,138px 66px,186px 102px,234px 38px,298px 86px,250px 150px,250px 250px,150px 250px,150px 150px,250px 150px,186px 102px)
14
    ;
15
  }
16
</style>

This is the first time we did this in the JSCraftCamp Discord and we had Michi and Meg checking in with me. I should really do more marketing for it 😅

Anyways - I'm sure everybody thought the solution would be three divs and a bit of rotations, right? But could you do it with a conic-gradient and a clip-path? Check the solution of how we did it!

< Back to Frontend Friday Folks Index