Css Draw a Fixed Size Circle in the Background
Before nosotros first. If you want more gratis content but in video format. Don't miss out on my Youtube channel where I publish weekly videos on FrontEnd coding.
https://www.youtube.com/user/Weibenfalk
----------
Are you lot new to spider web development and CSS? Take y'all ever wondered how those dainty shapes are fabricated that you see all over the net? Wonder no more. Y'all've come to the right place.
Below I will explain the very basics of creating shapes with CSS. There's a lot to tell y'all about this topic! Therefore I will non cover all (far from all) tools and shapes but this should give you a basic idea of how shapes are created with CSS.
Some shapes require more than "prepare and tricks" than others. Creating shapes with CSS is usually a combination of using width, tiptop, top, right, left, edge, bottom, transform and pseudo-elements like :before and :after. We also accept more modern CSS properties to create shapes with like shape-exterior and clip-path. I'll write well-nigh them below also.
CSS Shapes - The basic mode
By using a few tricks in CSS we've always been able to create basic shapes like squares, circles, and triangles with regular CSS properties. Let's look at a few of them now.
Squares and rectangles
Squares and rectangles are probably the easiest shapes to achieve. Past default, a div is ever a square or a rectangle.
Yous gear up the width and superlative as shown in the beneath code. And so it'due south just a thing of giving the chemical element a background colour. You can have whatever other backdrop you want on the element.
#square { background: lightblue; width: 100px; height: 100px; } 
Circles
Information technology's almost as easy to create a circle. To create a circle we can fix the border-radius on the element. This will create curved corners on the chemical element.
If nosotros prepare it to 50% information technology volition create a circle. If y'all fix a different width and height we will go an oval instead.
#circle { background: lightblue; border-radius: 50%; width: 100px; height: 100px; } 
Triangles
Triangles are a little trickier. We have to set the borders on the element to match a triangle. By setting the width and pinnacle to zero on the element, the actual width of the element is going to be the width of the border.
Keep in listen that the border edges on an chemical element are 45 caste diagonals to each other. That's why this method works to create a triangle. By setting i of the borders to a solid color and the other borders to transparent information technology will take the form of a triangle.
#triangle { width: 0; height: 0; border-left: 40px solid transparent; border-right: 40px solid transparent; border-lesser: 80px solid lightblue; } 
If you want to have a triangle/arrow pointing in another direction Yous can change the border values corresponding to what side you lot want to be visible. Or you lot can rotate the element with the transform property if you want to be really fancy.
#triangle { width: 0; height: 0; border-meridian: 40px solid transparent; border-right: 80px solid lightblue; border-bottom: 40px solid transparent; } 
Alright – that's an intro to basic shapes with CSS. In that location are probably an countless amount of shapes you can think of to create. These are just the fundamentals, but with a piffling creativity and determination you can achieve a lot with just bones CSS properties.
In some cases, with more advanced shapes, it's too a good idea to use the :afterward and :before pseudo selectors. This is out of scope of this article though as my intention is to encompass the basics to go you going.
Disadvantage
There is one big disadvantage with the to a higher place arroyo. For example, if you want your text to flow around and wrap your shape. A regular HTML div with background and borders to brand up the shape won't allow that. The text will not adapt and flow around your shape. Instead it volition menses effectually the div itself (which is a square or a rectangle).
Below is an illustration showing the triangle and how the text volition catamenia.
Luckily we have some modern CSS backdrop to use instead.
CSS Shapes - The other fashion
Nowadays we accept a property chosen shape-outside to utilize in CSS. This property lets y'all define a shape that the text will wrap/flow around.
Forth with this belongings we have some basic shapes:
inset()
circle()
ellipse()
polygon()
Here's a tip: You can besides use the clip-path property. You can create your shape with that in the same fashion, but it won't allow the text wrap around your shape like shape-outside does.
The element that we are going to apply the shape to with the shape-exterior holding to has to be floated. It also has to have a divers width and summit. That's really important to know!
You tin read more than near why hither. Beneath is too a text that I've taken from the provided link to developer.mozilla.org.
The shape-exterior belongings is specified using the values from the list below, which ascertain the float area for float elements. The float expanse determines the shape around which inline content (float elements) wrap. inset()
The inset() type can be used to create a rectangle/square with an optional offset for the wrapping text. It allows you to provide values on how much you desire your wrapping text to overlap the shape.
Yous tin specify the offset to be the same for all four directions like this: inset(20px). Or it tin be individually set for each direction: inset(20px 5px 30px 10px).
You tin can use other units also to ready the kickoff, for example, percent. The values correspond similar this: inset(top right bottom left) .
Check out the below code example. I've specified the inset values to be 20px at the top, 5px to the correct, 30px at the lesser and 10px to the left. If you desire your text to go around your foursquare instead yous tin but skip using inset() at all. Instead set the background on your div and specify the size as usual.
#foursquare { float: left; width: 100px; peak: 100px; shape-exterior: inset(20px 5px 30px 10px); background: lightblue; } 
Information technology is also possible to give inset() a second value that specifies the edge-radius of the inset. Similar beneath:
#square { bladder: left; width: 100px; summit: 100px; shape-outside: inset(20px 5px 30px 10px round 50px); groundwork: lightblue; } 
circle()
In this one a circle is created using the shape-exterior property. You besides accept to use a clip-path with the corresponding property for the circle to show upward.
The prune-path holding can take the same value every bit the shape-outside property so nosotros can give it the standard circumvolve() shape that we used for shape-outside. Too, note that I've applied a 20px margin on the chemical element hither to requite the text some space.
#circle { bladder: left; width: 300px; height: 300px; margin: 20px; shape-outside: circle(); clip-path: circle(); background: lightblue; } 
In the higher up example, I don't specify the radius of the circle. This is because I want it to exist as big as the div is (300px). If you want to specify a different size for the circle you tin can exercise that.
The circumvolve() takes two values. The beginning value is the radius and the second value is the position. These values volition specify the center of the circle.
In the beneath case I've set the radius to 50%. Then I take shifted the heart of the circle by 30%. Note that the word "at" has to be used between the radius and position values.
I've also specified another position value on the clip-path. This volition clip the circle in half equally I motion the position to zip.
#circle { bladder: left; width: 150px; superlative: 150px; margin: 20px; shape-outside: circle(fifty% at xxx%); clip-path: circumvolve(fifty% at 0%); background: lightblue; } 
ellipse()
Ellipses piece of work the same way as circles except that they create an oval. You lot tin define both the X value and the Y value, similar this: ellipse(25px 50px).
The same as a circle, it also takes a position value as the final value.
#ellipse { float: left; width: 150px; height: 150px; margin: 20px; shape-exterior: ellipse(20% 50%); prune-path: ellipse(twenty% l%); background: lightblue; } 
polygon()
A polygon is a shape with different vertices/coordinates defined. Below I create a "T" shape which is the start letter in my proper noun. I offset from the coordinates 0,0 and motion from left to right to create the "T" shape.
#polygon { float: left; width: 150px; height: 150px; margin: 0 20px; shape-outside: polygon( 0 0, 100% 0, 100% 20%, 60% 20%, 60% 100%, xl% 100%, 40% 20%, 0 20% ); clip-path: polygon( 0 0, 100% 0, 100% twenty%, 60% twenty%, 60% 100%, 40% 100%, twoscore% 20%, 0 20% ); background: lightblue; } 
Images
You can also use images with transparent backgrounds to create your shape. Like this round beautiful moon below.
This is a .png image with a transparent background.
<img src="src/moon.png" id="moon" /> #moon { float: left; width: 150px; height: 150px; shape-exterior: url("./src/moon.png"); } 
And that'southward it! Thank you for reading.
Nigh the author of this article
My name is Thomas Weibenfalk and I'm a programmer from Sweden. I regularly create costless tutorials on my Youtube aqueduct. There's also a few premium courses out there on React and Gatsby. Feel free to visit me on these links:
Twitter — @weibenfalk,
Weibenfalk on Youtube,
Weibenfalk Courses Website.
Learn to code for free. freeCodeCamp'south open source curriculum has helped more than 40,000 people get jobs as developers. Get started
Source: https://www.freecodecamp.org/news/css-shapes-explained-how-to-draw-a-circle-triangle-and-more-using-pure-css/
0 Response to "Css Draw a Fixed Size Circle in the Background"
Enregistrer un commentaire