< 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