If anyone is curious, I was able to figure how to do this by rotating the block instead of using pseudo elements for the shape.
*{margin:0px;padding:0px;}
section{width:930px; margin:0px auto;}
#diamondwrapper{position:relative; -webkit-transform-origin: 50% 50%;}
.diamondrow{display:flex; flex-direction:row; justify-content:center;}
.diamond{position:relative; color:white; text-align:center; height:165px; width:165px; margin:35px 35px -80px 38px; background:#e2e2e2; -webkit-transform: rotate(45deg); display:flex; flex-direction:row; justify-content:center; align-items:center; flex-shrink:0; transition:all .4s ease;}
.diamond:hover{background:#b7b7b7;}
.diamondcontent{height:120px; width:120px; line-height:40px; display:flex; flex-direction:column; justify-content:center; -webkit-transform: rotate(-45deg);}