Squares with CSS

There are a few notorious problem in CSS such as centering a div, but creating a square is also not that simple. We could set the width and the height equal to a set of pixels, but in most cases this is not what we want to do.

CSS has a aspect-ratio property, that we can use to create a square. The square class below demonstrates this example. More information about the aspect-ratio property can be found here: aspect-ratio - CSS: Cascading Style Sheets | MDN (mozilla.org).

.square {
  aspect-ratio: 1;
}

.center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.style {
  border: 4px #777 solid;
  border-radius: 6px;
  background-color: white;
  padding: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-weight: bold;
  font-size: 18pt;
  transition: transform 0.5s;
}

.style:hover { 
  transform: scale(1.5) rotate(360deg); 
  cursor: pointer;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.45);
}

Example

This example is created with the CSS classes that we have defined above.

SQUARE

SQUARE

SQUARE

SQUARE