Like this
Should be centered too.
.diamond {
display: block;
height: 30px;
width: 30px;
background-color: white;
border: 2px solid #dcdcdc;
transform: rotate(45deg);}
Rotate the content back the other way.
* {
margin: 0;
padding: 0;
}
.diamond {
display: block;
height: 30px;
width: 30px;
background-color: white;
border: 2px solid #dcdcdc;
transform: rotate(45deg);
text-align: center;
line-height: 30px;
margin: 25px;
}
.diamond p {
transform: rotate(-45deg);
}
<div class="diamond">
<p>Hi</p>
</div>