geometric pattern

geometric-pattern.markdown

geometric pattern

diamond in a square

A Pen by Tankred on CodePen.

License.

index.html

<div class="center">
<div class="square">		
	<div class="diamond"></div>
</div>
</div>

style.css

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%;
}