Css

Creating Responsive Squares and Circles with CSS Only

Css

Creating Responsive Squares and Circles with CSS Only

Are you looking to add some geometric flair to your website without using images or JavaScript? Look no further! In this post, we'll explore how to create responsive squares and circles using pure CSS. These shapes will automatically adjust to different screen sizes, making them perfect for modern, responsive web designs.

Creating a Responsive Square:

<!DOCTYPE html>
<html>
<head>
  <title>Responsive Square with CSS</title>
  <style>
    .square {
      width: 50%; /* Adjust the width as needed */
      padding-bottom: 50%; /* Maintain the aspect ratio (1:1) */
      background-color: #3498db; /* Set your desired square color */
      position: relative;
    }

    /* Optional: Add some text or content inside the square */
    .square::before {
      content: "Square";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #fff; /* Set the text color */
      font-size: 24px; /* Adjust the font size */
      font-weight: bold;
    }
  </style>
</head>
<body>
  <div class="square"></div>
</body>
</html>

Creating a Responsive Circle:

<!DOCTYPE html>
<html>
<head>
  <title>Responsive Circle with CSS</title>
  <style>
    .circle {
      width: 50%; /* Adjust the width as needed */
      padding-bottom: 50%; /* Maintain the aspect ratio (1:1) */
      border-radius: 50%; /* Turn the square into a circle */
      background-color: #e74c3c; /* Set your desired circle color */
      position: relative;
    }

    /* Optional: Add some text or content inside the circle */
    .circle::before {
      content: "Circle";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #fff; /* Set the text color */
      font-size: 24px; /* Adjust the font size */
      font-weight: bold;
    }
  </style>
</head>
<body>
  <div class="circle"></div>
</body>
</html>

How it Works:

  1. Both the square and circle share similar CSS techniques. We use the padding-bottom property to set the height equal to the width, creating a square shape initially.
  2. For the circle, we add border-radius: 50% to the square, turning it into a circle by making the border radius half of the width.
  3. The position: relative is applied to the container div to allow absolute positioning for the optional content inside the shape.
  4. Feel free to adjust the width, colors, and content inside the shapes to match your website's design requirements.

Embrace Responsiveness: 
Thanks to the use of percentage-based values, these shapes are fully responsive and will scale proportionally on different screen sizes.

 

Recent Posts

Categories

Tag Clouds