Drawing an egg tart using CSS
A Pen by Charlotte Tan on CodePen.
Drawing an egg tart using CSS
A Pen by Charlotte Tan on CodePen.
<div id="eggtart"> | |
<div id="oval"></div> | |
<div id="burst-12"></div> | |
<div id="trapezoid"></div> | |
<div id="recipe"><a href="https://www.buzzfeed.com/iristian/these-egg-tarts-are-totally-custard-heaven">Eat me!</a></div> | |
</div> | |
<div id="ref">reference: <img src="http://themixingbowlhk.com/system/baking_classes/images/000/000/111/medium/Egg_Tart.png"></div> |
$egg-color: #fdf18f; | |
$crust-color: #e4ba5e; | |
$bottom-crust: #b47224; | |
body { | |
position: relative; | |
} | |
a { | |
text-decoration: none; | |
color: darken($bottom-crust, 20%); | |
} | |
a:hover { | |
&:after { | |
position:absolute; | |
font-family: FontAwesome; | |
content: "\00a0\00a0\f0f5"; | |
} | |
} | |
#eggtart { | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
transform: translate(-50%, 50%); | |
text-align:center; | |
} | |
#oval { | |
position: relative; | |
width: 200px; | |
height: 100px; | |
background: $egg-color; | |
border-radius: 100px / 50px; | |
transform: translateX(10px); | |
z-index: 100; | |
} | |
#burst-12 { | |
background: $crust-color; | |
width: 80px; | |
height: 80px; | |
position: relative; | |
text-align: center; | |
border-radius: 13px / 13px; | |
transform: scale(2.3,1.2) translate(30px,-74px); | |
z-index:6; | |
&:before { | |
transform: rotate(30deg); | |
} | |
&:after { | |
transform: rotate(60deg); | |
} | |
} | |
#burst-12:before, #burst-12:after { | |
content: ""; | |
position: absolute; | |
top: 0; | |
left: 0; | |
height: 80px; | |
width: 80px; | |
background: $crust-color; | |
border-radius: 13px / 13px; | |
z-index: 6; | |
} | |
#trapezoid { | |
border-top: 80px solid $bottom-crust; | |
border-left: 50px solid transparent; | |
border-right: 50px solid transparent; | |
height: 0; | |
width: 120px; | |
transform: translate(0px,-110px); | |
border-bottom-left-radius: 10em 7em; | |
border-bottom-right-radius: 10em 7em; | |
z-index: 5; | |
} | |
#recipe { | |
transform: translateY(-80px); | |
font-size: 1.5em; | |
} | |
#ref { | |
top: 0; | |
right: 0; | |
position: absolute; | |
visibility: hidden; | |
} |
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet" /> |