Talk like a Pirate day

#css #tutorial #holiday #humor

Avast mateys, It be Talk like a Pirate day. It's time to hoist the Jolly Roger and set sail.
But before you can hoist, or raise, a flag you have to make it with CSS.

I made a the Pirate flag with CSS. This was just a quick project when I realized what the day was so this will be a brief write up.

The Skull is made out of two modified ovals. Then I put the eye and nose sockets and teeth on top.

<div class="skull">
            <div class="upperSkull">
                <div class="eyerow">
                  <div class="eye"></div>
                  <div class="eye"></div>
                  </div>
                </div>
                  <div class="jaw">
                    <div class="tooth"></div>
                    <div class="tooth"></div>   
                    <div class="tooth"></div>
                  </div>
                <div class="nose"></div>
</div>

  .skull {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; 
  position: relative;
  filter: drop-shadow(0 0 0.95rem var(--DarkRed));
  }
 .upperskull {
    width: 120px;
    height: 100px;
    background: var(--White);
    border-radius: 60px 60px 15px 15px;
  }

.eyerow{
  width:120px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center; 
  gap: 10px;
  margin-top: 45px;
}
  .eye {
    width: 42px;
    height: 32px;
    border-radius: 50%;
    background: #191919;
  }

  .jaw {
    background: var(--White);
    display: flex;
    flex-direction: row;
    width: 86px;
    height: 30px;
    border-radius: 6px 6px 92px 92px;
    justify-content: center;
    gap: 10px;  
  }
  .tooth {
    width: 8px;
    height: 12px;
    background: var(--Black);
    border-radius: 40%;
    margin-top: 20px;
  }
  .nose {
    height: 33px;
    width: 15px;
    border-radius: 40%;
    background: var(--Black);
    margin-top: -50px;
  }

The crossbones are two long rectangles with circles on each end.

            <div class="crossbones">
                <div class="bones left">
                    <div class="endsL"></div>
                    <div class="endsR"></div>
                </div>
                <div class="bones right">
                    <div class="endsL"></div>
                    <div class="endsR"></div>
                </div>
            </div>

  .bones{
    width: 150px;
    height: 15px;
    background: var(--White);
    border-top-right-radius: 35%;
    border-top-left-radius: 35%;
    border-bottom-right-radius: 35%;
    border-bottom-left-radius: 35%;
    overflow: visible;

  }
  .endsL{
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: var(--White);
    margin-right: 85px;
    margin-top: -5px;
  }