Arrange elements in a half-moon shape with CSS and HTML

Question

Arrange elements in a half-moon shape with CSS and HTML

I am in the process of designing a webpage that will showcase 5 rounded components, each with different sizes, arranged in a semi-circle pattern. I have included an image to give an idea of how I want the layout to appear, with placeholder circles indicating where custom images will be placed. The plan is to dynamically load the images through JavaScript and Angular, hence why I have currently defined them in the HTML.

At the moment, I am manually rounding the edges of the images, adjusting their sizes individually, and using 'transform: translate(x,y)' to position them in a semi-circle formation. However, this method lacks flexibility, as resizing the images would entail recalculating the positioning for a circle shape.

This is the current code snippet I am working with:

<div class="round top1st" style="background-image: url('image1.png');"></div>
<div class="round top2nd" style="background-image: url('image2.png');"></div>
.
.
.

.round {
    border-radius:50% 50% 50% 50%;  
    overflow: hidden;
    background-position: center center;
    background-repeat: no-repeat;
    background-size:cover;
}

.top1st {
    width: 180px;
    height: 180px;
    transform: translate(0px,300px);
}

.top2nd {
    width: 150px;
    height: 150px;
    transform: translate(100px, -30px);
}
.
.
.

Is there a more efficient approach to achieve this? It's important to note that the circular images will vary in size and will be loaded dynamically from a database query using Angular on the client-side.

html css

Answer 1

Answer №1

If it were up to me, I would approach it like this.

Let's say your container has a specified height (in pixels or percentage), I suggest using percentages for the rest of the sizes and positioning the circles using position:absolute, specifically with properties like top and bottom instead of translate (also in percentage values).

By doing this, your circles will adjust perfectly to any screen size.

The only challenge lies in making sure the circle maintains its perfect shape when you have a width defined in percentage. In this case, I recommend using a bit of jQuery to calculate the actual width of the element and assign the same value to the height:

var cw = $('.top1st').width();
$('.top1st').css({
    'height': cw + 'px'
});

CSS styling:

.container {
    width:100%;
    height:400px;
    position:relative;
    background-color:#ddd;
}
.round {
    border-radius:50% 50% 50% 50%;  
    overflow: hidden;
    background-position: center center;
    background-repeat: no-repeat;
    background-size:cover;
    background-color:red;
    display:inline-block;
    position:absolute;
}
.top1st {
    width: 20%;
    bottom:10%;
    left:8%;
}
.top2nd {
    width: 18%;
    bottom:40%;
    left:28%;
}
.top3nd {
    width: 16%;
    bottom:45%;
    left:50%;
}
.top4nd {
    width: 14%;
    bottom:35%;
    left:70%;
}
.top5nd {
    width: 12%;
    bottom:15%;
    left:85%;
}

These values are just placeholders; you can adjust them to suit your design preferences. Check out the result on this FIDDLE.

The only minor drawback is that if you resize the window, the circles might lose their shape until you refresh the page. This shouldn't be a significant issue since users typically don't frequently resize their windows; they'll still see the circles correctly positioned on any device they use.

Answer 2

If it were up to me, I would approach it like this.

Let's say your container has a specified height (in pixels or percentage), I suggest using percentages for the rest of the sizes and positioning the circles using position:absolute, specifically with properties like top and bottom instead of translate (also in percentage values).

By doing this, your circles will adjust perfectly to any screen size.

The only challenge lies in making sure the circle maintains its perfect shape when you have a width defined in percentage. In this case, I recommend using a bit of jQuery to calculate the actual width of the element and assign the same value to the height:

var cw = $('.top1st').width();
$('.top1st').css({
    'height': cw + 'px'
});

CSS styling:

.container {
    width:100%;
    height:400px;
    position:relative;
    background-color:#ddd;
}
.round {
    border-radius:50% 50% 50% 50%;  
    overflow: hidden;
    background-position: center center;
    background-repeat: no-repeat;
    background-size:cover;
    background-color:red;
    display:inline-block;
    position:absolute;
}
.top1st {
    width: 20%;
    bottom:10%;
    left:8%;
}
.top2nd {
    width: 18%;
    bottom:40%;
    left:28%;
}
.top3nd {
    width: 16%;
    bottom:45%;
    left:50%;
}
.top4nd {
    width: 14%;
    bottom:35%;
    left:70%;
}
.top5nd {
    width: 12%;
    bottom:15%;
    left:85%;
}

These values are just placeholders; you can adjust them to suit your design preferences. Check out the result on this FIDDLE.

The only minor drawback is that if you resize the window, the circles might lose their shape until you refresh the page. This shouldn't be a significant issue since users typically don't frequently resize their windows; they'll still see the circles correctly positioned on any device they use.

Arrange elements in a half-moon shape with CSS and HTML

Answer №1

Similar questions

Stop unwanted clicking on inactive buttons in Angular

Tips for inserting a PHP variable into a Bootstrap CCS class to change the background image dynamically

What is the best way to incorporate a label onto the border of a div while ensuring responsiveness?

Is it necessary to have all font-family files for a font to function properly?

Change the Bootstrap components according to the size of the screen

Angular Filtering: Enhancing User Search Experience [Part 2]

The secondary linked stylesheet is not affecting the layout

How can I close the sidebar with a single tap anywhere outside of it?

Positioning a div beyond the visible area without altering its original width, with the assistance of the Skrollr plugin

Posting data to an HTML file with a foreign key matching the input value in Express.js

Fixed columns with horizontal scrolling to prevent Datatables columns from overlapping

Ways to update a component's state by clicking a button located on a different component

React doesn't properly display JSON data

Scaled-down navigation when scrolling

Enhance the navbar brand with a unique lighting effect on the background

Getting URL parameters dynamically without reloading the page

I prefer my information to be arranged neatly and separated by spaces

What is the best way to extract the numerical value from a JavaScript object?

Using AngularJS to bind radio buttons to ng-model

Issue with the camera functionality in phonegap 3.3.0 API on IOS platform