JSFiddle - React, Tailwind, and code Playground

Responsive CSS square with centered transform

by Andrew Pougher

HTML

<div class='square-box'>
    <div class='square-content'><div><span><h2>TITLE
  </h2>Aspect ratio 1:1 Aspect ratio 1:1 Aspect ratio 1:1 Aspect ratio 1:1 Aspect ratio 1:1 Aspect ratio 1:1 Aspect ratio 1:1 Aspect ratio 1:1 Aspect ratio 1:1 Aspect ratio 1:1 Aspect ratio 1:1 Aspect ratio 1:1 Aspect ratio 1:1 Aspect ratio 1:1 Aspect ratio 1:1 Aspect ratio 1:1 Aspect ratio 1:1 Aspect ratio 1:1 Aspect ratio 1:1 Aspect ratio 1:1 Aspect ratio 1:1 Aspect ratio 1:1 Aspect ratio 1:1 Aspect ratio 1:1 Aspect ratio 1:1 Aspect ratio 1:1 Aspect ratio 1:1 Aspect ratio 1:1 Aspect ratio 1:1 Aspect ratio 1:1 Aspect ratio 1:1 Aspect ratio 1:1 Aspect ratio 1:1 Aspect ratio 1:1 Aspect ratio 1:1 Aspect ratio 1:1 Aspect ratio 1:1 Aspect ratio 1:1 Aspect ratio 1:1 Aspect ratio 1:1 </span></div></div>
</div>

CSS

@import url("https://fonts.googleapis.com/css?family=Open+Sans:100,200,300,400,600,700,900,300italic,400italic,600italic");
  body {
   color: white;
   font: 300  0.8rem/1.4rem  'Open Sans';
 }
 .square-box{
    position: relative;
    width: 100vw;
    height:300px;
    overflow: hidden;
    background: #4679BD;
}
.square-box:before{
    content: "";
    display: block;
    padding-top: 100%;
}
.square-content{
    position:  absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    color: white;
}
.square-content div {
   display: table;
   width: 100%;
   height: 100%;
     position: relative;
   right: 144px;
   top: 0px;
   height: 350px;
   width: 350px;
   background-color: #e2e2e2;
   transform: rotate(45deg);
   z-index: 0;
   box-shadow: 15px 5px 0px rgba(0, 0, 0, 0.1)
}
.square-content span {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    color: #222222;
    font-weight:600
}