mojaray2k/square-patterns-css.md

## square-patterns-css.md

      
    Raw
  

              square-patterns-css.md
            
          
    Square Patterns in CC

nesting and centering squares

<!DOCTYPE html>
<html>
<head>
</head>
<body>
	<div class='outer-square'>
    <div class='first-inner-square'>
        <div class='second-inner-square'></div>
    </div>
    <div class='corner-square'>
    </div>
  </div>
</body>
</html>
.outer-square {
  width: 250px;
  height: 250px;
  background-color: red;
  position: relative;
}

.first-inner-square {
  width: 50%;
  height: 50%;
  background-color: green;
  position: absolute;
  top: 50%;
  left: 25%;
  transform: translateY(-50%);
  line-height: 300px;
  text-align: center;
  font-size: 0px;
}

.second-inner-square {
  width: 50%;
  height: 50%;
  font-size: 16px;
  display: inline-block;
  vertical-align: 55px;
  line-height: initial;
  text-align: left;
  margin-left: auto;
  margin-right: auto;

  background-color: yellow;
}

.corner-square {
  width: 25%;
  height: 25%;
  position: absolute;
  top: 87%;
  left: 75%;
  transform: translateY(-50%);
  background-color: blue;
}