css shapes - circle and diamond

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <div class="wrapper">
      
      <div class="d" id="diamond"></div>
      <div class="d" id="circle"></div>
      <div class="d" id="oval"></div>
      
    </div>
    
  </body>

</html>

// Code goes here

/* Styles go here */


.d {
   display:inline-block;
   margin:20px; 
 }
 
#square1 {
  height: 15px;
  width: 15px;
  background-color: green;
}
#square2 {
  height: 15px;
  width: 15px;
  background-color: gold;
}
#diamond {
        background: purple;
        height: 15px;
        width: 15px;
        text-align: center;
        transform:rotate(45deg);
        border: white;
        border-style: solid;
        border-width: 1px;
}
#circle {
    height: 15px;
    width: 15px;
	background: red;
	border-radius: 50%;
}