An Interest In:
Web News this Week
- April 1, 2024
- March 31, 2024
- March 30, 2024
- March 29, 2024
- March 28, 2024
- March 27, 2024
- March 26, 2024
June 23, 2019 03:20 pm GMT
Original Link: https://dev.to/tchaflich/a-width-responsive-perfect-square-in-pure-css-3dao
A width-responsive perfect square in pure CSS
Cover photo by Daniel McCullough via Unsplash.
Points of interest
Resizable block-level divs
The resize
property - I wasn't aware you could actually control this past textareas, but stumbled upon it when looking for a way to make a user-resizable div without using JavaScript.
How the square is made
#square { width: 100%; padding-bottom: 100%; position: relative; background-color: #2980b9;}
Breaking this down:
width: 100%
is to make sure it's defined as having the same width as its outer, resizable container.padding-bottom: 100%
is based on a trick in the CSS spec. When specifying a margin or padding by percentage, it's always based on the width, even if it's a -top or -bottom property. In this way we get a property that's equal to the width.position: relative
is so that I can put stuff inside it without disrupting the padding; any additional content would add content to the box, which would make it a rectanglebackground-color
is there so you can see where it is \_()_/
How the circle is made
Once you have any square, making a circle is easy enough. The only trick you really need is border-radius: 50%
, but let's break down the responsive circle a bit more.
#circle { position: absolute; top: 0; bottom: 0; width: 100%; height: 100%; border-width: 4px; border-color: #27ae60; border-style: solid; border-radius: 50%;}
position: absolute
makes sure that this circle stays within theposition: relative
square while not adding any in-flow content to it.top: 0; bottom: 0; width: 100%; height: 100%;
constrains the circle to the exact dimensions of the responsive square. At this point, what we have is a position: absolute container that is an inner copy of our square.- The
border-*
properties are used to build the outline of the circle. We have a 4px green solid border, and it has a radius of half the edge of the square.
Quick geometry recap
Here's an illustration of why 50%
is the magic number to make a circle from a square:
The radius of the circle is equal to half the side of the square.
Original Link: https://dev.to/tchaflich/a-width-responsive-perfect-square-in-pure-css-3dao
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To