Egg tart

egg-tart.markdown

Egg tart

Drawing an egg tart using CSS

A Pen by Charlotte Tan on CodePen.

License.

index.html

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

style.scss

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

styles

<link href="http://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet" />