Multiple buttons to one circle

Question

I want to create a circle with distances with my 6 buttons. In the image you can see the result of my try but it doesn't look like a circle. I circled my problems with red. Below you can have a look on my HTML and CSS code.

<!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>

Since you have static values for height and width. Why don't you just add an image/background that will outline the divs. Then position them in the container. That is the simplest solution. But if you don't want an image, then have fun playing with the border values. — pol, Dec 28 '16 at 14:00
I don't want an image. But I played arround with the border values and never received the expected result... ^^ — Tobias Egli, Dec 28 '16 at 14:06
But you are already using an image, for the background. Why not use images for the buttons as well. — Mr Lister, Dec 28 '16 at 14:29
SVG sounds good :) No I'm not usign an image. This isn't a Web project it's a Tizen Gear project. My background is black. On my image you can see an emulator for a smartwatch — Tobias Egli, Dec 28 '16 at 14:34

Matthew Brent · Accepted Answer · 2016-12-28T16:23:34.953

As suggested in the comments, the svg route is the easiest way of reproducing what you want quickly.

However, liking the challenge, I used overflow:hidden and position:absolute to effectively mask out the different sections.

I created a pen here.

Any content you wish to place with inside the sections would need to go within the .circle div.

I hope this is along the lines of what you were wanting.

.circle-container {
            position:relative;
            display:block;
            width:400px;
            height:400px;
            margin:auto;
        }
        
        .circle-crop-top {
            width: 100%;
            height: 25%;
            display:block;
            overflow:hidden;
        }
        
        .circle-first-left, .circle-first-right, .circle-second-left, .circle-second-right {
            float:left;
            width: 50%;
            height: 25%;
            overflow: hidden;
            white-space: nowrap;
        }
        .circle-bottom {
            width:100%;
            height:25%;
            display: block;
            overflow:hidden;
        }
        .circle-parent {
            position:relative;
        }
        .circle-parent p {
            position:absolute;
            text-align:center;
            margin:0;
        }
        .circle {
            width:396px;
            height:396px;
            border-radius:50%;
            position: absolute;
            top:0;
            border:2px solid blue;
            text-align: center;
            overflow:hidden;
        }
        .circle-first-left .circle {
            top:-100px;
        }
        .circle-first-right .circle {
            top:-100px;
            right: 0;
        }
        .circle-second-left .circle {
            top:-200px;
        }
        .circle-second-right .circle {
            top:-200px;
            right: 0;
        }
        .circle-bottom .circle {
            top:-300px;
            right: 0;
        }
        .circle-crop-top p {
            margin:0;
            border: 2px solid blue;
            width: 100%;
            height: 50px;
            padding-top: 40px;
            text-align: center;
            top: -2px;
        }
        .circle-first-left p {
            border: 2px solid blue;
            width: 192px;
            height: 60px;
            margin:10px 0 10px 0;
            padding-top: 30px;
            text-align: center;
            top: 23%;
            left:-2px;
        }
        .circle-first-right p {
            border: 2px solid blue;
            width: 192px;
            margin:10px 0 10px 0;
            height: 60px;
            padding-top: 30px;
            text-align: center;
            top: 23%;
            right:-2px;
        }
        .circle-second-left p {
            border: 2px solid blue;
            width: 192px;
            height: 60px;
            margin:10px 0 10px 0;
            padding-top: 30px;
            text-align: center;
            top: 48%;
            left:-2px;
        }
        .circle-second-right p {
            border: 2px solid blue;
            width: 192px;
            margin:10px 0 10px 0;
            height: 60px;
            padding-top: 30px;
            text-align: center;
            top: 48%;
            right:-2px;
        }
        .circle-bottom p {
            margin:0;
            border: 2px solid blue;
            width: 100%;
            height: 60px;
            padding-top: 40px;
            text-align: center;
            top: 76%;
        }

<div class="circle-container">
        <div class="circle-crop-top">
            <div class="circle-parent">
                <div class="circle"><p>Luzern</p></div>
            </div>   
        </div>
        <div class="circle-first-left">
            <div class="circle-parent">
                <div class="circle"><p>Bern</p></div>
            </div>
        </div>
        <div class="circle-first-right">
            <div class="circle-parent">
                <div class="circle"><p>Zurich</p></div>
            </div>
        </div>
        <div class="circle-second-left">
            <div class="circle-parent">
                <div class="circle"><p>Basel</p></div>
            </div>
        </div>
        <div class="circle-second-right">
            <div class="circle-parent">
                <div class="circle"><p>Genf</p></div>
            </div>
        </div>
        <div class="circle-bottom">
            <div class="circle-parent">
                <div class="circle"><p>Saas-Fee, Alpin</p></div>
            </div>
        </div>
    </div>

how to make it responsive? :-) – Legends Jan 02 '17 at 02:31 — Legends, Jan 02 '17 at 02:31

Multiple buttons to one circle

1 Answers1