Posted on Sep 19, 2023

Talk like a Pirate day

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; }