Several buttons converging towards a single circle

https://i.sstatic.net/NyHXu.png

I attempted to create a circular layout using 6 buttons, but the end result did not form a perfect circle as intended. In the image provided, I highlighted the areas of concern in red. Below, you will find my HTML and CSS code for reference.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8>
    <title>Title</title>
    <style>
     .container {
margin-top: 360px;
margin-bottom: 16px;
padding-left: 30px;
padding-right: 30px;
}

     .top-left {
    margin-top: -260px;
    margin-left: -20px;
    border-radius: 40px / 100px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    position: absolute;
    }
    
    .top-right {
    margin-top: -260px;
    margin-left: 155px;
    border-radius: 40px / 100px;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    border-bottom-right-radius: 0;
    position: absolute;
    }
    
    .bottom-left {
    margin-top: -160px;
    margin-left: -20px;
    border-radius: 40px / 100px;
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    border-bottom-right-radius: 0;
    position: absolute;
    }
    
    .bottom-right {
    margin-top: -160px;
    margin-left: 155px;
    border-radius: 40px / 100px;
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    position: absolute;
    }
    
    .top-center{
    border-radius: 440px / 220px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    width: 270px!important;
    height: 70px!important;
    margin-top: -334px;
    margin-left: 15px;
    position: absolute;
    }
    
    .top-center p {
    padding: 0px 40px 0px 40px;
    }
    
    .bottom-center{
    border-radius: 440px / 220px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    width: 270px!important;
    height: 70px!important;
    margin-top: -64px;
    margin-left: 15px;
    position: absolute;
    }
    
    .bottom-center p {
    padding: 0px 40px 0px 40px;
    }
    
    .div-button {
    width: 168px;
    height: 92px;
    border: 2px solid rgba(77,207,255,1);
    background-color: transparent;
        color: rgba(77,207,255,1);
        font-size: 25px;
        text-align: center;
    vertical-align: middle;
    line-height: 100px;
    transition: all .3s linear;
    }
    
    .div-button p{
    margin-top: -10px!important;
    text-overflow: ellipsis;
    white-space: nowrap;
      overflow: hidden;
    }
    
    .button-selected {
    transform: scale(0.8);
    border: none;
    background-color: rgba(77,207,255,1);
    color: black;
    }
    </style>
</head>
<body>
  <div class="container">
<div class="div-button top-center" id="top-center">
<p>Text</p>
</div>
<div class="div-button top-left" id="top-left">
<p>Text</p>
</div>
<div class="div-button top-right" id="top-right">
<p>Text</p>
</div>
<div class="div-button bottom-left" id="bottom-left">
<p>Text</p>
</div>
<div class="div-button bottom-right" id="bottom-right">
<p>Text</p>
</div>
<div class="div-button bottom-center" id="bottom-center">
<p>Text</p>
</div>
</div>

</body>
</html>

htmlcsstizen

Answer №1

Following the suggestions in the feedback, I found that utilizing the svg path is the most efficient method to achieve your desired outcome rapidly.

However, embracing the challenge, I leveraged overflow:hidden and position:absolute to effectively conceal the distinct segments.

You can view the demonstration on this pen here.

If you plan to include any content within the sections, it should be placed inside the .circle div.

I trust that this aligns with what you had envisioned.

.circle-container {
            position:relative;
            display:block;
... 
        </div>
    </div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Transferring an image file from PHP to JavaScript

I have encountered an issue with transferring images stored as LONGBLOB files in my database to a JS file for dimension comparison with the screen. Here is how I retrieve the images: function fillArrays(){ $idArray = array(); $sql = "SELECT oglas_id,s ...

javascriptphpjqueryhtml

Troubleshooting multiple element visibility problems with jQuery

Please take a look at the code snippet below. $(document).ready(function(){ $(".like-btn").hover(function() { var rowid = $(this).attr("data-rowid"); $(".reaction-box[data-rowid='" + rowid + "']").fadeIn(100, function() { $(".reaction ...

javascriptjqueryhtmlcssjquery-ui

What is the best way to interact with a hidden link using Selenium webdriver?

Whenever I try to access a specific link on a webpage, it is only accessible after selecting a filter button element. Filter Button Desired Link I attempted to locate the element using CSS Selector due to the presence of "include-out-of-stock" in the link ...

pythonhtmlseleniumselenium-webdriver

CSS Dropping Down Menu Design

Hello everyone! I am taking my first step into web development and currently in the process of revamping my DJ website. Check out my updated site here: I am working on creating a dropdown div within the top-left menu that will display information about t ...

cssdrop-down-menu

Unable to load a different webpage into a DIV using Javascript

Today has been a bit challenging for me. I've been attempting to use JavaScript to load content into a <div>. Here is the JavaScript code I'm working with: function loadXMLDoc(filename) { var xmlhttp; if (window.XMLHttpRequest) { ...

javascripthtmlcss

Reorganize a list based on another list without generating a new list

Among the elements in my HTML list, there are items with text, input fields, and tables. I also have a specific order list like [3,1,2,0]. Is it feasible to rearrange the items in the HTML list on the page based on this order list without generating a new ...

javascripthtmljquerycss

Integrating additional information (HTML) into current content utilizing Vue JS data structures

I am attempting to use Vue JS to load content onto a page. The user interface consists of a select element, a textarea, and a button. I want to display data from a third-party API response on the page. The first item loads successfully, but subsequent item ...

javascripthtmlvue.js

Position an image on the top left corner of a div's border

I have a situation where I'm trying to overlay a small square transparent image on the top left border of a div that has a 1px border. The image is 48px by 48px in size and I want it to give the illusion that it's going underneath the top and lef ...

htmlcss

Fetching the entire webpage

When attempting to load a specific webpage using an iframe, I encountered the following issue: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title></ ...

html

Changing the Direction of News Ticker Movement from Right to Left

I need to switch the news ticker movement direction from right to left to left to right because I will be using Arabic language, so it is crucial to change the movement direction. Despite trying for several days, I have been unable to find a solution. HTM ...

javascripthtmlcssright-to-left

The Power of the CSS Universal Selector and Specificity

Currently exploring the puzzling scenario where .x seems to have higher specificity than *.x, despite expectations. Shouldn't *.x technically have a specificity of 0-0-1-1 (1 class, 1 tag) while .x is just one class with specificity 0-0-1-0? Let&apo ...

csscss-specificity

Align the body of the table with the header after populating the table with values

Issue : The data in the table body is misaligned with the headers of each column. Solution : var test_insert1 = '<tr>' + '<td class="td-trad-9">762261</td>' + '<td class="td-trad-7">1.16176&l ...

javascripthtmlcsshtml-tablecss-tables

Incorporating a File Attachment within a JSON Structure

Can a file attachment be included in a JSON Object? I am working on an HTML Form with text field inputs and a file attachment, and I would like to send all this form data (including the file attachment) as a JSON Object to the server. Are there any specif ...

javahtmljsonfile

The Radio button and Checkbox values are causing an issue where the Radio button is continuously summing upon clicking without a limit. Why is this happening? Check out

I'm currently stuck in a function and believe it would be helpful for you to guide me along the correct path. My goal is to sum the values of checked boxes with the values of checked radio buttons. However, the radio values are continuously accumulat ...

javascripthtmlcsscheckboxradio-button

I'm seeking assistance with a frontend script problem. I'm curious if there are alternative approaches to coding this script that may be more effective. Can anyone offer guidance on this?

As a frontend developer specializing in script injection, I have been utilizing Adobe Target to inject scripts. However, this method presents several challenges: 1. It is difficult to debug code errors as my HTML and CSS are wrapped inside ' ' a ...

javascripthtmlcssfrontend

Add a new row to the table when a dropdown option is selected, and remove the row when deleted. Ensure that the row is only added

Here is my specific requirement: I need a table with a default row containing a dropdown menu in the first column. When an option is selected from the dropdown, a new table row should be added with the same content as the main row and a delete button for ...

javascriptjqueryhtmlcss

Issues with Media Query in Mobile Device Footer not Resolving

Despite searching through numerous pages on Stack, I have not been able to find a solution. I am attempting to remove the footer on mobile devices using a media query. Unfortunately, it does not seem to be effective on the device, although it works when th ...

phpcssmedia-queries

Positioning of header, main content, and footer elements

My webpage is structured into three sections: the header, the main, and the footer. The header at the top has a fixed height of 109px with a 6px border. The main section should extend across the entire page below the header and reach the bottom where the ...

htmlcssheaderfooter

Get the nearest offspring of the guardian

I have a main 'container' div with multiple subsections. Each subsection contains 1 or 2 sub-subsections. Let's say I have a variable that holds one of the subsections, specifically the 4th subsection. This is the structure:container > s ...

javascriptjqueryhtml

Fill the second dropdown menu options based on the selection made in the first dropdown menu

I need assistance with dynamically populating my second drop-down menu based on the selection made in the first drop-down. Here are the steps I've taken so far: form.php - Utilizing javascript, I have set up a function to call getgeneral.php. The se ...

javascriptphphtmlajax