Using code instead of images

1.  To get started, create a new HTML document called cssGraphics.htmlinside the /retina/folder. Then inside the basic HTML structure we'll add some CSS code to create a button.
<style>
.buttonArea {
margin: 50px;
}
.button {
background: #7999ff;
background: -webkit-linear-gradient(#7999ff 0%, #002c62 100%);
background: linear-gradient(#7999ff 0%, #002c62 100%);
border-radius: 60px;
box-shadow: 1px 1px 4px #666;
cursor: pointer;
padding: 10px 40px;
color: #fff;
font-size: 20px;
text-align: center;
text-decoration: none;
text-shadow: 1px 1px 2px #000;
}
2.  Then we'll create a diamond for our first CSS shape.
.diamond {
background: #000;
margin: 40px 20px;
width: 50px;
height: 50px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
3.  Next we'll create a circle with CSS.
.circle {
margin: 20px;
background: #000;
border-radius: 50px;
width: 50px;
height: 50px;
}
4.  Finally, we'll create a triangle in CSS.
.triangle {
margin: 20px;
width: 0;
height: 0;
border-bottom: 25px solid transparent;
border-top: 25px solid transparent;
border-left: 25px solid #000;
}
</style>
5.  Then we'll add the HTML code to display the button and shapes we created.
<div class="buttonArea">
<a class="button">Click Me</a>
</div>
<div class="diamond"></div>
<div class="circle"></div>
<div class="triangle"></div>
6.  If you run this code in your Retina device you should see all the elements we just created. Note that for our example we only added a vendor prefix for Webkit (Safari and Chrome). You'll need to add other browsers' vendor prefixes for additional support.