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;
}
Top comments (2)
This be a splendid idea! Tell us, landlober, what did ye learn while makin this here pirate flag?
Cool, I think the cross is uneven though. Also might be fun to make it with an SVG. If you're up for the challenge arrrg