Skip to content

Instantly share code, notes, and snippets.

@tankred
Created December 12, 2014 22:32
Show Gist options
  • Save tankred/c7002db47e3d4a943ab5 to your computer and use it in GitHub Desktop.
Save tankred/c7002db47e3d4a943ab5 to your computer and use it in GitHub Desktop.
geometric pattern
<div class="center">
<div class="square">
<div class="diamond"></div>
</div>
</div>
body {
background:#1D1F20;
font-size:0.9em;
}
.center {
/* [1] */
position: absolute;
left: 50%;
top: 50%;
/* [2] */
transform: translate(-50%, -50%);
/**/
}
.square {
width:160px;
height:160px;
background-color: #ccc;
}
.diamond {
position:absolute;
top:47px;
left:80px;
width: calc(160px - 48px);
height: 112px;
background-color:#3D65AA;
/* Rotate */
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
/* Rotate Origin */
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment