< Back to Frontend Friday Folks Index

Negative Box

Visit the official puzzle page (affiliate link!) to play it yourself. If you buy a course from CSSBattle through my affiliate link, I receive a share of it!

Highlighted solution (251 characters)
1
<style>
2
  &{
3
    background:
4
      conic-gradient(#172D2C 250deg,#E9AF53 0 290deg,#172D2C 0) 200px -65px / 360px no-repeat,
5
      linear-gradient(19.9deg,#172D2C 93px,#E9AF53 0 215px,#172D2C 0) 20px 13.5px / 180px no-repeat,
6
      #172D2C
7
  }
8
</style>

Two gradients next to each other. Now that I look at this again, I think of a second solution that could be a conic gradient for all the colors and two linear gradients that remove the rest...!

< Back to Frontend Friday Folks Index