title: Diamond shape with wrapping width and height
body: <p>Okay, so whenever I try to create a diamond the edges of the diamond go out of it's width, and I'm not looking to fix this using margin, I want the actual width and height to change.</p>
  
  <p>Here's how I would create a diamond shape..</p>
  
  <pre><code>diamond{
              width:65px;
              height:65px;
              border:3px solid #0E4991;
              transform: rotate(45deg);
          }
  </code></pre>
  
  <p>This is what happens:
  <a href="https://i.stack.imgur.com/PFoFZ.png" rel="nofollow noreferrer">Image</a></p>
  
  <p>How do I fix this?</p>