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

Asked

Viewed 554 times

6

I need to make a menu exactly the same as in the picture, the problem is that I can’t make the bottom curve of the element, preferably I would like to do only with css, but if not, another solution is accepted.

html5 css3

  • This way you want I still do not know... I only know the rounding of edges with border-Radius

2 answers

6

2 solutions: Creating 3 different elements, or 2 if you don’t mind absolute positioning.

Solution 1:

inserir a descrição da imagem aqui

Element 1 has border-radius on all left banks, and border-right-width: 0;

Element 2 has border: 4px 4px 0 0;

Element 3 is the key: create a div that contains it with the gray background; make Element 3 have background-color: white; and adjust the values of border-radius of the upper margins.

Solution 2: Elements 1 and 2 are one, and 3 is positioned (track position:absolute; bottom:0;right:0;) within.

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

  • Very good your technique, I’ll try to remember when doing some curved div, it’s much simpler like this

  • Good solutions, but I need this curved part to be transparent. It’s possible?

  • Via image, or using the method described by @Sneepsninja.

  • @Sneepsninja It’s 'gambiarra' since CSS does not have border-style:inset still, but I’ve seen uglier ones around. =)

  • 1

    kkkkkkk @Onosendai is the methodology used http://www.gohorseprocess.com.br/extreme-go-horse-(xgh)

  • @Onosendai I’m sorry, I referred xgh to my own answer.

  • @Sneepsninja what? mine has a XGH trickster what of floodplain too. =)

Show 2 more comments

6


hard mode, do 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>

To not leave the answer too big, the other details about the parameters and functions you find in this documentation:

Edit: At the request of the crowd I put an example of how it would look if it was used to be a navbar, I did kind of to exemplify even, if you want the click event to be implemented ( because I did onmousemove, it would be basically the same thing ) just say that edit again.

http://www.w3schools.com/html/html5_canvas.asp

  • 1

    +1 for hard mode, canvas, nail and tooth"

  • Nice guy, but the element has to be a Nav, has how to do?

  • onmousemove event already deserves +1 ? or only win if do onclick ? rsrsrsrsr

  • 1

    The @Sneepsninja answer solves the original question plus the transparency requirement. It’s an excellent starting point for you to develop the rest, Elder. If you still have questions, feel free to start a new question.

  • Thanks for all your help!

Browser other questions tagged html5 css3

You are not signed in. Login or sign up in order to post.