What I want to do:

I would like to create a circular menu, as shown below, taking into account all the interactive elements in the picture, that is, the image in the center, as well as four segments around it. It is important that the solution be cross-browser compatible.

enter image description here

Solutions I tried:

I tried to use a round div and CSS3 border , where the borders of the images are used as the background. But it does not work very well, since each element must be autonomous.

I heard about CSS forms, but I don’t know how to use them to create a circular menu.

EDIT: may have a way to add a text label on each of these pictures ...

comments:

did you try to make a mask clip? - ProllyGeek

@ProllyGeek not, I'm trying to make a good start page for my site ... I thought I could implement my idea. I did not know that it was so difficult. - linuscl

@linuscl please check my editing, if this is what you are trying to achieve, we can reopen the question, or send a new question. - ProllyGeek

Source: CSS radial menu

2 answers 2

Here's the solution, if you need only four quarters, not a few more:

 .wrap { position: relative; height: 310px; width: 310px; } .square { display: inline-block; height: 150px; width: 150px; } .circle { position: absolute; height: 180px; width: 180px; top: 50%; left: 50%; background: gray; border-radius: 50%; transform: translate(-50%, -50%); border: 10px solid white; } .wrap div:hover { background: url(http://placekitten.com/g/300/300); background-size: 100% 100%; } .square:nth-child(1) { border-radius: 100% 0 0 0; background: cornflowerblue; } .square:nth-child(2) { border-radius: 0 100% 0 0; background: tomato; } .square:nth-child(3) { border-radius: 0 0 0 100%; background: darkorange; } .square:nth-child(4) { border-radius: 0 0 100% 0; background: green; } 
 <div class="wrap"> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="square"></div> <div class="circle"></div> </div>

Answered: jbutler483

    I made this pen - a radial menu in CSS .
    A circular menu appears when you hover:

    Demo: CSS radial menu

    The radial shape is made with border radius and overflow property. When hovering animation is processed CSS transition - ( scale and opacity ).

    For the menu version, see this demo.

    Full code for radial menu

     body,html{margin:0;padding:0;height:100%;} body{background:#E3DFD2;box-shadow: inset 0 0 20vmin 0 #585247;} .wrap{ position:relative; width:80vmin; height:80vmin; margin:0 auto; background:inherit; transform:scale(0.2) translatez(0px); opacity:0; transition:transform .5s, opacity .5s; } a{ position:absolute; left:0; top:0; width:47.5%; height:47.5%; overflow:hidden; transform:scale(.5) translateZ(0px); background:#585247; } a div{ height:100%; background-size:cover; opacity:.5; transition:opacity .5s; border-radius:inherit; } a:nth-child(1){ border-radius:40vmin 0 0 0; transform-origin: 110% 110%; transition:transform .4s .15s; } a:nth-child(1) div{ background-image:url('https://farm3.staticflickr.com/2827/10384422264_d9c7299146.jpg'); } a:nth-child(2){ border-radius:0 40vmin 0 0; left:52.5%; transform-origin: -10% 110%; transition:transform .4s .2s; } a:nth-child(2) div{ background-image:url('https://farm7.staticflickr.com/6083/6055581292_d94c2d90e3.jpg'); } a:nth-child(3){ border-radius:0 0 0 40vmin; top:52.5%; transform-origin: 110% -10%; transition:transform .4s .25s; } a:nth-child(3) div{ background-image:url('https://farm7.staticflickr.com/6092/6227418584_d5883b0948.jpg'); } a:nth-child(4){ border-radius:0 0 40vmin 0; top:52.5%; left:52.5%; transform-origin: -10% -10%; transition:transform .4s .3s; } a:nth-child(4) div{ background-image: url('https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg'); } a:nth-child(5){ width:55%;height:55%; left:22.5%; top:22.5%; border-radius:50vmin; box-shadow:0 0 0 5vmin #E3DFD2; transform:scale(1); } a:nth-child(5) div{ background-image: url('https://farm4.staticflickr.com/3766/12953056854_b8cdf14f21.jpg'); } span{ position:relative; display:block; margin:0 auto; top:45vmin; width:10vmin; height:10vmin; border-radius:100%; background:#585247; transform:translateZ(0px); } span span{ position:absolute; width:60%;height:3px; background:#ACA696; left:20%; top:50%; border-radius:0; } span span:after, span span:before{ content:''; position:absolute; left:0; top:-1.5vmin; width:100%; height:100%; background:inherit; } span span:after{ top:1.5vmin; } span:hover + .wrap, .wrap:hover{ transform:scale(.8) translateZ(0px); opacity:1; } span:hover + .wrap a, .wrap:hover a{ transform:scale(1) translatez(0px); } a:hover div{ opacity:1; transform:translatez(0px); } 
     <span><span></span></span> <div class="wrap"> <a href="#"><div></div></a> <a href="#"><div></div></a> <a href="#"><div></div></a> <a href="#"><div></div></a> <a href="#"><div></div></a> </div>

    A source