【CSS Battle】GiftBox 作ってみた

はじめに

こちらは CSS Advent Calendar 2022 に参加した記事になります。

CSS Battle というサービスは知っていますか？
お題にあるデザインになるように CSS でスタイルを書くサービスになります。

今回、クリスマスにちなんで、GiftBox に挑戦してみました！

無事、100% 一致することができたので、大変満足です！
一致したコードを共有しますが、見る前にみなさんも挑戦してみることをおすすめします！

GiftBox のコード

<div id="ribbon1"></div>
<div id="ribbon2"></div>

<div class="items">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<style>
  body {
    background: #AC474B;
  }

  #ribbon1 {
    width: 40px;
    height: 40px;
    background: #FFFFFF;
    border-radius: 100% 100% 0% 100%;
    
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-87%, -250%);
  }

  #ribbon1::after {
    content: "";
    width: 20px;
    height: 20px;
    background: #AC474B;
    border-radius: 100% 100% 0% 100%;
    
    position: absolute;
    transform: translate(50%, 50%);
  }

  #ribbon2 {
    width: 40px;
    height: 40px;
    background: #FFFFFF;
    border-radius: 100% 100% 100% 0%;
    
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-13%, -250%);
  }

  #ribbon2::after {
    content: "";
    width: 20px;
    height: 20px;
    background: #AC474B;
    border-radius: 100% 100% 100% 0%;
    
    position: absolute;
    transform: translate(50%, 50%);
  }
  
  .items > div {
    width: 60px;
    height: 60px;
    background: #FFFFFF;
    
    position: absolute;
    top: 50%;
    left: 50%
  }

  .items > div:nth-child(1) {
    transform: translate(-117%, -67%);
  }

  .items > div:nth-child(2) {
    transform: translate(17%, -67%);
  }

  .items > div:nth-child(3) {
    transform: translate(-117%, 67%);
  }

  .items > div:nth-child(4) {
    transform: translate(17%, 67%);
  }
</style>

ここまで読んでいただき、ありがとうございました！