animisoft
1/22/2018 - 8:31 AM

Circle Without Knowing Width and Height

This snippet let you create a circle box without knowing the width and the height, so the circle will be responsive with the container.

circle.html
content_copyfile_download
<div class="circle">
  <span>
    -- CONTENT --
  </span>
</div>
circle.scss
content_copyfile_download
.circle {
  display: inline-block;
  border-radius: 50%;
  min-width: 20px;
  min-height: 20px;
  padding: 5px;
  background: #2c93b1;
  color: white;
  text-align: center;
  line-height: 1;
  box-sizing: content-box;
  white-space: nowrap;
  width: 100%;
  &:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    padding-top: 100%;
    height: 0;
  }
  span {
    display: inline-block;
    vertical-align: middle;
  }
}