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: relativeis 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 rectangle -
background-coloris 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: absolutemakes sure that this circle stays within theposition: relativesquare 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.
Top comments (4)
position: absolute? Is it reference to document (root)?Hey can you help me do a responsive triangle instead? I've been trying for a while and can't get it to work
I'm going to guess that you're going to need a bit of trigonometry if you're unlucky, 2D CSS transforms (specifically
rotate), and the::before&::afterpseudo-elements. My initial approach would be to construct the lines of out the borders of the before/after elements and rotate them into place.(This is assuming we can't use SVG for some reason. It can handle pretty much any shape easily, but figuring out how to use SVG in the first place is a barrier to entry.)
What kind of triangle are you trying to make? This StackOverflow answer has some interesting magic, but it may or may not work for you depending on what you're trying to do.
I believe if you try and do it with Border and border radius, it might be possible.