How can I leave half of a side of an element curved inward as in the figure with css?

Question

How can I leave half of a side of an element curved inward as in the figure with css?

Navigation

#1 by (6 votes)
#2 by (6 votes)

6

I need to make a menu exactly the same as the one in the figure, the problem is that I can not do the bottom curve of the element, preferably I would just do it with css, but if it does not, another solution is accepted.

html5 css3

asked by anonymous 26.08.2015 / 13:50

2 answers

6

2 solutions: Creating 3 different elements, or 2 if you do not mind absolute positioning.

Solution 1:

Element1hasborder-radiusinalltheleftmargins,andborder-right-width:0;

Element2hasborder:4px4px00;

Element3isthekey:createadivthatcontainsitwiththegraybackground;makeElement3havebackground-color:white;andadjustthevaluesofborder-radiusoftheuppermargins.

Solution2:Elements1and2areone,and3ispositioned(viaposition:absolute;bottom:0;right:0;)inside.

.container
{
  width:400px;
  height:80px;
  position:relative;
  overflow:hidden;
  }


.principal
{
  border:4px solid black;
  background-color:gray;
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  border-radius:80px 0 0 80px;
  
}

.detalhe
{
  border:4px solid black;
  width:600px;
  height:600px;
  position:absolute;
  bottom:-590px;
  right:-220px;
  border-radius: 100%;
  background-color: white;
}

<div class='container'>
  <div class='principal'>
  </div>
  <div class='detalhe'>
  </div>  
</div>

26.08.2015 / 14:24

Catch only one div from another page via jQuery Help with Regex

score 6 · Accepted Answer

Hard mode, on canvas, nail and tooth:

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="600" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
var c=document.getElementById('myCanvas');
var ctx=c.getContext('2d');

// preencher com a cor
ctx.beginPath();    
ctx.rect(65,2,534,150);
ctx.fillStyle="grey";
ctx.fill();

// linha de cima
ctx.beginPath(); 
ctx.lineWidth="2";
ctx.strokeStyle="black";
ctx.moveTo(65,1);
ctx.lineTo(600,1);
ctx.stroke();

// curva da esquerda
ctx.beginPath();    
ctx.arc(77,76,75,0.5*Math.PI,1.5*Math.PI);
ctx.fill();
ctx.stroke();

// curva inferior
ctx.beginPath();    
ctx.arc(440,340,250,1*Math.PI,2*Math.PI);
ctx.fillStyle="white";
ctx.fill();
ctx.stroke();

// linha de baixo
ctx.beginPath();    
ctx.moveTo(65,149);  
ctx.lineTo(278,149);
ctx.stroke();

// linha da direita
ctx.moveTo(600,1);  
ctx.lineTo(600,146);
ctx.stroke();

ctx.font="25px Verdana";
ctx.fillText("Menu Item1",50,50);
ctx.fillText("Menu Item2",250,50);

window.onmousemove = function (event) { 
    var posX = event.clientX;
    var posY = event.clientY; 
    console.log('x='+posX+'   y='+posY);
    
    if ( (posX > 61 && posX <=206) && ( posY >= 43 && posY <= 57 ) ) {        
        ctx.fillStyle="blue";
        ctx.fillText("Menu Item1",50,50);
    }else{ 
        ctx.fillStyle="white";
        ctx.fillText("Menu Item1",50,50);
    }

};



</script>

</body>
</html>

In order not to leave the answer too large, the other details about the parameters and the functions you find in this documentation:

Edit: At the request of the crowd I put an example of what it would look like if it were used to be a navbar, I did sort of to even if I wanted the click event to be implemented (because I did the onmousemove, would be basically the same thing) just say that I edit again.

link