Make circle in css

Basic shapes

Before looking at shapes, it is worth understanding two pieces of information that go together to make these shapes possible:

The type

The type is used as the value for all of our basic shapes. This type uses Functional Notation: the type of shape is followed by brackets, inside of which are additional values used to describe the shape.

The arguments which are accepted vary depending on the shape that you are creating. We will cover these in the examples below.

The reference box

Understanding the reference box used by CSS Shapes is important when using basic shapes, as it defines each shape’s coordinate system. You have already met the reference box in the guide on creating shapes from Box Values, which directly uses the reference box to create the shape.

The Firefox Shapes Inspector helpfully shows the reference box in use when you inspect a shape. In the screenshot below I have created a circle, using shape-outside: circle(50%) . The floated element has 20 pixels of padding, border and margin applied, and the Shapes Inspector highlights these reference boxes. When using a basic shape, the reference box used by default is the margin-box. You can see in the screenshot that the shape is being defined with reference to that part of the Box Model.

You can add the various box values after your basic shape definition. Therefore the default behavior is as if you have defined.

.shape  shape-outside: circle(50%) margin-box; > 

You can therefore change this in order that your shape uses the different parts of the box model, for example to use the border.

.shape  shape-outside: circle(50%) border-box; > 

What is worth noting is that the margin-box will clip the shape, therefore shapes created in reference to other shapes which extend past the margin box will have the shape clipped to the margin box. We will see this in the following examples of basic shapes.

For an excellent description of references boxes as they apply to CSS Shapes, see Understanding Reference Boxes for CSS Shapes.

inset()

The inset() type defines a rectangle, which may not seem very useful as floating an item will give you a rectangular shape around it. However the inset() types enables the definition of offsets, thus pulling the content in over the shape.

Therefore inset() takes four values for the top, right, bottom and left values plus a final value for border-radius . The below CSS creates a rectangular shape inset from the reference box of the floated element 20 pixels from the top and bottom and 10 pixels from the left and right, with a border-radius value of 10 pixels.

.shape  float: left; shape-outside: inset(20px 10px 20px 10px round 10px); > 

Using the same rules as we use for the margin shorthand, you can set more than one offset at once. If there is only one value, it applies to all sides. If there are two values, the top and bottom offsets are set to the first value and the right and left offsets are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values, they apply to the top, right, bottom, and left, respectively. So, the above rules could also be described as:

.shape  float: left; shape-outside: inset(20px 10px round 10px); > 

In the example below we have an inset() shape used to pull content over the floated element. Change the offset values to see how the shape changes.

You can also add the Box Value that you wish to use as a reference box. In the example below change the reference box from margin-box to border-box , padding-box or content-box to see how the reference box used as the starting point before offsets are calculated changes.

circle()

The circle() value for shape-outside can accept two possible arguments. The first is the shape-radius .

Both circle() and ellipse() values for shape-outside are specified as accepting this argument of . This argument can be a length or percentage but can also be one of the keywords closest-side or farthest-side .

The keyword closest-side uses the length from the center of the shape to the closest side of the reference box. For circles, this is the closest side in any dimension. For ellipses, this is the closest side in the radius dimension.

The keyword farthest-side uses the length from the center of the shape to the farthest side of the reference box. For circles, this is the farthest side in any dimension. For ellipses, this is the farthest side in the radius dimension.

The second argument is a position . If omitted this will be set to center . However you can use any valid position here to indicate the position of the center of the circle.

Our circle therefore accepts one radius value, which may be a length, a percentage or the closest-side or farthest side keyword then optionally the keyword at followed by a position value.

In the below example I have created a circle on an item with a width of 100 pixels, plus a margin of 20 pixels. This gives a total width for the reference box of 140 pixels. I have given a value of 50% for the shape-radius value which means that our radius is 70px. I have then set the position value to 30%.

In the live example you can play with increasing or decreasing the size of the circle by changing the size of the radius, moving the circle around with the position value, or setting a reference box as we did for inset() .

As an additional example, if you use the keywords top left for position, you can make a quarter circle shape in the top left corner of the page. The example below uses generated content to create a quarter circle shape for text to flow around.

The shape will be clipped by the margin box

When describing Reference Boxes I explained that the margin-box will clip the shape. You can see this by moving the center of our circle towards the content by setting the position to 60%. The center of the circle is now nearer the content and the circle extends past the margin-box. This means that the extension becomes clipped and squared off.

img  float: left; shape-outside: circle(50% at 60%); > 

ellipse()

An ellipse is essentially a squashed circle and so ellipse() acts in a very similar way to circle() except that we have to specify two radii x and y in that order.

These may then be followed by position values as with circle() to move the center of the ellipse around. In the example below we have an ellipse with an x radius of 40%, a y radius of 50% and the position being left. This means that the center of the ellipse is on the left edge of the box giving us a half ellipse shape to wrap our text around. You can change these values to see how the ellipse changes.

The keyword values of closest-side and farthest-side are useful to create a quick ellipse based on the size of the floated element reference box.

polygon()

The final Basic Shape is the most complex and enables the creation of many side shapes by way of creating a polygon() . This shape accepts three or more pairs of values (a polygon must at least draw a triangle). These values are co-ordinates drawn with reference to the reference box.

In the example below I have created a shape for text to follow using the polygon() , you can change any of the values to see how the shape is changed.

You may well find the Firefox Shape Inspector very useful here to create your polygon shape. The screenshot below shows the shape highlighted in the tool.

Another useful resource is Clippy — a tool for creating shapes for clip-path , as the values for Basic Shapes are the same as those used for clip-path .

Found a content problem with this page?

This page was last modified on May 25, 2023 by MDN contributors.

Источник

How to Create Circles with CSS

There are many techniques used to create a circle. In our snippet, we’ll demonstrate some examples with the CSS border-radius property, as well as with the HTML and SVG elements.

The most common one is using the border-radius property. We just need to set the border-radius property to 50% on the needed element to create curved corners.

As you’ve already noticed, it’s quite easy. Now let’s start with creating HTML.

Create HTML

div circle1">div> div circle2">div>

Add CSS

• Set the border-radius to 50% for the “.circleBase”.
• Set the width, height, background, and border properties for the «circle1» and «circle2» classes separately.

.circleBase < border-radius: 50%; > .circle1 < width: 100px; height: 100px; background: #4bc475; border: 1px solid #000; > .circle2 < width: 150px; height: 150px; background: #a1a1a1; border: 1px solid #000; >

Now you can see the full example.

Example of creating circles using elements:

html> html> head> title>Title of the document title> style> .circleBase < border-radius: 50%; > .circle1 < width: 100px; height: 100px; background: #4bc475; border: 1px solid #000; > .circle2 < width: 150px; height: 150px; background: #a1a1a1; border: 1px solid #000; > style> head> body> div class="circleBase circle1"> div> div class="circleBase circle2"> div> body> html>

Result

The method that we used in the example above is the simplest one and has good browser support.

Now, let’s see an example, where we use elements within a . Here, we also specify the display as “inline-block” and add the text-align property set to “center” to the to align the circles to the center.

Example of creating circles using elements:

html> html> head> title>Title of the document title> style> .circle < height: 25px; width: 25px; background-color: #bbb; border-radius: 50%; display: inline-block; > div < text-align: center; > style> head> body> div> h1>Circles h1> span class="circle"> span> span class="circle"> span> span class="circle"> span> span class="circle"> span> div> body> html>

In our next example, we create a circular and place a text inside it.

Example of creating a circle with a text inside:

html> html> head> title>Title of the document title> style> #circle < background: #cfcfcf; width: 128px; height: 128px; border-radius: 64px; border: 2px solid #000; > #circle div < position: relative; left: 19px; top: 19px; width: 90px; height: 90px; color: #000; text-align: center; > style> head> body> div id="circle"> div>Example of a circular div div> div> body> html>

In the following example, we create a responsive circle. Here, we set a percentage width and border-radius for the container. Then, we add an empty block of padding-bottom to the :after pseudo-element. Thus we can have the same result of creating a container with equal width and height.

Example of creating a responsive circle:

html> html> head> title>Title of the document title> style> .rescircle < width: 20%; border-radius: 50%; background: #b5b5b5; > .rescircle:after < content: ""; display: block; padding-bottom: 100%; > style> head> body> div class="rescircle"> div> body> html>

Example of creating a circle with the SVG element:

html> html> head> title>Title of the document title> head> body> svg height="150" width="150"> circle cx="60" cy="60" r="50" stroke="blue" stroke-width="2" fill="lightblue" /> svg> body> html>

Example of creating a circle with the HTML element:

html> html> head> title>Title of the document title> head> body> canvas id="canvas" width="300" height="100"> canvas> script> var canvas=document.getElementById('canvas'); var context=canvas.getContext('2d'); var centerX=canvas.width / 2; var centerY=canvas.height / 2; var radius=40; context.beginPath(); context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); context.fillStyle='lightgreen'; context.fill(); context.lineWidth=2; context.strokeStyle="green"; context.stroke(); script> body> html>

Try also creating circles and other geometric shapes with our tool called Geometric Images.

Источник

Геометрические фигуры на CSS

Отличная подборка, как нарисовать различные геометрические фигуры одним элементом HTML.

Квадрат

Прямоугольник

Круг

Овал

Треугольник вверх

Треугольник вниз

Треугольник налево

Треугольник направо

Треугольник в левом верхнем углу

Треугольник в правом верхнем углу

Треугольник в левом нижнем углу

Треугольник в правом нижнем углу

Параллелограмм

Трапеция

Звезда (6-конечная)

Звезда (5-конечная)

 #star-five < margin: 50px 0; position: relative; display: block; color: red; width: 0px; height: 0px; border-right: 100px solid transparent; border-bottom: 70px solid red; border-left: 100px solid transparent; -moz-transform: rotate(35deg); -webkit-transform: rotate(35deg); -ms-transform: rotate(35deg); -o-transform: rotate(35deg); >#star-five:before < border-bottom: 80px solid red; border-left: 30px solid transparent; border-right: 30px solid transparent; position: absolute; height: 0; width: 0; top: -45px; left: -65px; display: block; content: ''; -webkit-transform: rotate(-35deg); -moz-transform: rotate(-35deg); -ms-transform: rotate(-35deg); -o-transform: rotate(-35deg); >#star-five:after

Пятиугольник

Шестиугольник

#hexagon < width: 100px; height: 55px; background: red; position: relative; >#hexagon:before < content: ""; position: absolute; top: -25px; left: 0; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 25px solid red; >#hexagon:after

Восьмиугольник

#octagon < width: 100px; height: 100px; background: red; position: relative; >#octagon:before < content: ""; position: absolute; top: 0; left: 0; border-bottom: 29px solid red; border-left: 29px solid #eee; border-right: 29px solid #eee; width: 42px; height: 0; >#octagon:after

Сердечко

#heart < position: relative; width: 100px; height: 90px; >#heart:before, #heart:after < position: absolute; content: ""; left: 50px; top: 0; width: 50px; height: 80px; background: red; -moz-border-radius: 50px 50px 0 0; border-radius: 50px 50px 0 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; >#heart:after

Знак бесконечности

#infinity < position: relative; width: 212px; height: 100px; >#infinity:before, #infinity:after < content: ""; position: absolute; top: 0; left: 0; width: 60px; height: 60px; border: 20px solid red; -moz-border-radius: 50px 50px 0 50px; border-radius: 50px 50px 0 50px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); >#infinity:after

Источник