<div class="box">
<div class="leaf"></div>
<div class="triangletop1"></div>
<div class="triangletop2"></div>
<div class="triangletop3"></div>
<div class="triangletop4"></div>
<div class="triangletop5"></div>
<div class="triangletop6"></div>
<div class="triangletop7"></div>
<div class="triangletop8"></div>
<div class="triangletop9"></div>
<div class="triangletop10"></div>
<div class="triangletop11"></div>
<div class="triangletop12"></div>
<div class="triangletop14"></div>
<div class="triangletop15"></div>
<div class="triangletop16"></div>
<div class="triangletop17"></div>
<div class="triangletop18"></div>
<div class="trianglebottom1"></div>
<div class="trianglebottom2"></div>
<div class="trianglebottom3"></div>
<div class="trianglebottom4"></div>
<div class="trianglebottom5"></div>
<div class="trianglebottom6"></div>
<div class="trianglebottom7"></div>
<div class="trianglebottom8"></div>
<div class="trianglebottom9"></div>
<div class="trianglebottom10"></div>
<div class="trianglebottom11"></div>
<div class="trianglebottomp12"></div>
<div class="trianglebottomp14"></div>
<div class="trianglebottom15"></div>
<div class="trianglebottom16"></div>
<div class="trianglebottom17"></div>
<div class="trianglebottom18"></div>
<div class="trianglebottom19"></div>
<div class="leafout"></div>
<div class="leafouttop"></div>
<div class="leafoutbottom"></div>
<div class="leafin"></div>
<div class="leafintop1">
<a class="home" href="Homepage.html">Menu1</a>
</div>
<div class="leafinbottom1">
</div><a class="menu" href="Homepage.html">Menu2</a>
<div class="leafintop2"></div><a class="contact" href="Homepage.html">Menu3</a>
<a class="about" href="Homepage.html">Menu4</a>
<div class="leafinbottom2"></div>
<div class="leafintop3"></div>
<div class="leafinbottom3"></div>
<div class="fold"></div>
</div>
html{background-color:black;}
.box{
position:relative;
margin:auto;
display:block;
margin-top:10%;
height:600px;
width:600px;
background:black;
}
.leaf {
position:absolute;
top:0%;
right:20%;
width: 400px;
height: 400px;
background-color: green;
-moz-border-radius: 400px 0px;
-webkit-border-radius: 400px 0px;
border-radius: 400px 0px;
transform:rotate(45deg);
border:3px solid none;
}
.triangletop1{
position:absolute;
top:22%;
left:5%;
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 50px solid green;
transform:rotate(15deg);
}
.triangletop2{
position:absolute;
top:19%;
left:10%;
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 50px solid green;
transform:rotate(15deg);
}
.triangletop3{
position:absolute;
top:17%;
left:15%;
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 50px solid green;
transform:rotate(15deg);
}
.triangletop4{
position:absolute;
top:15%;
left:20%;
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 50px solid green;
transform:rotate(15deg);
}
.triangletop5{
position:absolute;
top:13.5%;
left:25%;
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 50px solid green;
transform:rotate(30deg);
}
.triangletop6{
position:absolute;
top:12%;
left:30%;
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 50px solid green;
transform:rotate(30deg);
}
.triangletop7{
position:absolute;
top:11.5%;
left:35%;
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 50px solid green;
transform:rotate(30deg);
}
.triangletop8{
position:absolute;
top:11%;
left:40%;
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 50px solid green;
transform:rotate(40deg);
}
.triangletop9{
position:absolute;
top:11%;
left:45%;
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 50px solid green;
transform:rotate(40deg);
}
.triangletop10{
position:absolute;
top:11%;
left:50%;
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 50px solid green;
transform:rotate(40deg);
}
.triangletop11{
position:absolute;
top:12%;
left:55%;
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 50px solid green;
transform:rotate(40deg);
}
.triangletop12{
position:absolute;
top:13%;
left:60%;
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 50px solid green;
transform:rotate(50deg);
}
.triangletop14{
position:absolute;
top:14%;
left:65%;
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 50px solid green;
transform:rotate(66deg);
}
.triangletop15{
position:absolute;
top:16%;
left:70%;
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 50px solid green;
transform:rotate(68deg);
}
.triangletop16{
position:absolute;
top:19%;
left:75%;
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 50px solid green;
transform:rotate(70deg);
}
.triangletop17{
position:absolute;
top:22%;
left:80%;
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 50px solid green;
transform:rotate(72deg);
}
.triangletop18{
position:absolute;
top:25%;
left:85%;
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 50px solid green;
transform:rotate(75deg);
}
.trianglebottom1{
position:absolute;
top:35%;
left:5%;
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 50px solid green;
transform:rotate(-55deg);
}
.trianglebottom2{
position:absolute;
top:38%;
left:10%;
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 50px solid green;
transform:rotate(-55deg);
}
.trianglebottom3{
position:absolute;
top:40%;
left:15%;
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 50px solid green;
transform:rotate(-55deg);
}
.trianglebottom4{
position:absolute;
top:42%;
left:20%;
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 50px solid green;
transform:rotate(-55deg);
}
.trianglebottom5{
position:absolute;
top:44%;
left:25%;
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 50px solid green;
transform:rotate(-60deg);
}
.trianglebottom6{
position:absolute;
top:45%;
left:30%;
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 50px solid green;
transform:rotate(-70deg);
}
.trianglebottom7{
position:absolute;
top:46%;
left:35%;
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 50px solid green;
transform:rotate(-72deg);
}
.trianglebottom8{
position:absolute;
top:46%;
left:40%;
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 50px solid green;
transform:rotate(-74deg);
}
.trianglebottom9{
position:absolute;
top:46%;
left:45%;
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 50px solid green;
transform:rotate(-76deg);
}
.trianglebottom10{
position:absolute;
top:46%;
left:50%;
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 50px solid green;
transform:rotate(-78deg);
}
.trianglebottom11{
position:absolute;
top:45%;
left:55%;
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 50px solid green;
transform:rotate(-80deg);
}
.trianglebottom12{
position:absolute;
top:44%;
left:60%;
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 50px solid green;
transform:rotate(-84deg);
}
.trianglebottom15{
position:absolute;
top:44%;
left:61%;
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 50px solid green;
transform:rotate(-90deg);
}
.trianglebottom16{
position:absolute;
top:42%;
left:66%;
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 50px solid green;
transform:rotate(-93deg);
}
.trianglebottom17{
position:absolute;
top:40%;
left:72%;
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 50px solid green;
transform:rotate(-110deg);
}
.trianglebottom18{
position:absolute;
top:38%;
left:76%;
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 50px solid green;
transform:rotate(-125deg);
}
.trianglebottom19{
position:absolute;
top:36%;
left:80%;
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 50px solid green;
transform:rotate(-145deg);
}
.leafout {
position:absolute;
top:15%;
left:-10%;
width: 4%;
height: 35%;
background-color: green;
transform:rotate(90deg);
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
.leafouttop {
position:absolute;
top:26%;
left:-21.5%;
width: 3%;
height: 10%;
background-color: green;
transform:rotate(-75deg);
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
.leafoutbottom {
position:absolute;
top:29.5%;
left:-21.5%;
width: 3%;
height: 10%;
background-color: green;
transform:rotate(75deg);
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
.leafin {
position:absolute;
top:-11.5%;
right:52%;
width: 1.5%;
height: 90%;
background-color: #966F33;
transform:rotate(90deg);
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
transition:all 0.3s ease 0s;
}
.leafintop1 {
position:absolute;
top:20%;
left:25%;
width: 1%;
height: 15%;
background-color: #966F33;
transform:rotate(40deg);
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
.leafintop2 {
position:absolute;
top:20%;
left:45%;
width: 1%;
height: 15%;
background-color: #966F33;
transform:rotate(40deg);
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
.leafintop3 {
position:absolute;
top:20%;
left:65%;
width: 1%;
height: 15%;
background-color: #966F33;
transform:rotate(40deg);
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
.leafinbottom1 {
position:absolute;
top:32%;
left:23%;
width: 1%;
height: 15%;
background-color: #966F33;
transform:rotate(-40deg);
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
.leafinbottom2 {
position:absolute;
top:32%;
left:42%;
width: 1%;
height: 15%;
background-color: #966F33;
transform:rotate(-40deg);
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
.leafinbottom3 {
position:absolute;
top:32%;
left:60%;
width: 1%;
height: 15%;
background-color: #966F33;
transform:rotate(-40deg);
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
.home{
position:absolute;
top:100%;
left:-1200%;
transform:rotate(-41deg);
text-decoration:none;
color: white;
font-size:150%;
}
.menu{
position:absolute;
top:28%;
left:28%;
transform:rotate(1deg);
text-decoration:none;
color: white;
font-size:150%;
}
.contact{
position:absolute;
top:28%;
left:47%;
transform:rotate(1deg);
text-decoration:none;
color: white;
font-size:150%;
}
.about{
position:absolute;
top:28%;
left:68%;
transform:rotate(1deg);
text-decoration:none;
color: white;
font-size:150%;
}
.fold{
position:absolute;
top:33.2%;
right:6.1%;
width:0;
height:0;
border-style: solid;
border-width: 25px;
border-color: green black black green ;
box-shadow: 0px 0 10px 0px black;
}