I am making these two shapes with dots within them. One is a rectangle, the other a circle. Within these shapes I have made some dots, and I want these dots to render within and relative to the shapes. I cannot figure out why the dots inside the circle are outside instead. And how do I make them closer together vertically, and yet act relative to the shapes?
The purpose is to use input from the user where they decide the width and height of the shapes, and for the dots closer to the middle inside each shape.
JSFiddle Link: https://jsfiddle.net/kqgv6m94/1/
.rectangle {
width: 200px;
height: 100px;
background: gray;
position: relative;
}
.oval {
width: 200px;
height: 100px;
background: gray;
border-radius: 50%;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.bolt:before,
.bolt:after {
content: "";
position: absolute;
height: 100%;
width: 30%;
top: 0px;
background-image: radial-gradient(circle at center, red 5px, transparent 5px), radial-gradient(circle at center, black 5px, transparent 5px);
background-size: 20px 20px;
background-position: top center, bottom center;
background-repeat: no-repeat;
}
.bolt:before {
left: 0px;
}
.bolt:after {
right: 0px;
}
<div id="rectangle" class="rectangle">
<div>
<div class="bolt">
</div>
</div>
</div>
<hr>
<div>
<div id="oval" class="oval">
<div class="bolt">
</div>
</div>
I tried to use flexbox, but to no avail.
I then tried to create the dots in their own containers in hopes of inheriting properties.
I also tried to ‘force’ the dots into place, but if I change window size / new height and weight values I get new dot-positions.
5
Answers
While the
.oval
is rounded, it’s box is still the same rectangle as the.rectangle
has.If you want your dots be inside the circle, make
.bolt
be a smaller rectangle in that circlefirst why the dots inside the circle is outside?
your point is a background image, its height is 100%, and its width is 30%, so it actually looks like this:
so when add css with
.oval
withborder-radius: 50%
, the oval div change to circle. But the dot will not follow the change, stay the same. And dot will look like outside circle.If you want to make them closer together vertically, you can change the
before
andafter
background-size: 40px 40px
, or you can set left and right to make them closer horizontally.Also you can set the
.bolt:before, .bolt:after
width
lager like 50% to get what you want.The
border-radius
rounds the corners of an element’s outer border edge, but does not affect the area it takes on DOM. When you applyborder-radius
it will change the position ofborder
andbackground
but not the content and area taken by element.As you have given
boder-radius: 50%
, it start rounding corners from center, hence the children at the edge goes of the circle.To make circle inside the oval, you can update the
background-position
of:before
andafter
Complete Example :
I understand your issue. The problem is that your current code doesn’t handle the positioning of the dots inside the circle correctly. I have made some changes to your code to fix the issue and to achieve your desired behavior.
Assuming that the ellipse is just a stretched circle, the largest rectangle that could be inscribed inside it is
a√2 × b√2
wherea
andb
are the lengths of semi-axes (ref).Following is a pure CSS solution with no hard coding: