How to make a rounded negative corner to put on the flap of a button?

Question

How to make a rounded negative corner to put on the flap of a button?

Navigation

#1 by (1 votes)

0

They would be rounded corners off the button:

              |
              |
   __________ / <---- em cima (usando cláusula css :before)
  /
  |  Botão
  |
  \___________
              \ <---- em baixo (usando cláusula css :after)
              |
              |

See this jsfiddle example , I would like to round off the outside.

I'm trying to follow some patterns like this example .

css css3 css-border-radius css-border

asked by anonymous 25.09.2017 / 21:20

1 answer

Reading in JSON file generating error Save Image Upload from a PHP variable

score 1 · Accepted Answer

Set the elements :before and :after as follows, creating 2 borders in each by applying the page background (in this case, green) and positioning them:

#menu ul li.active:before {
content:'';
 padding: 5px; /* um espaçamento de 5px é suficiente */
 background: green; /* mesmo fundo da página */
 width:2px;
 height: 2px;
 float:right;
 position:relative;
 top:-13px;
 border-radius: 0 0 100% 0; /* curvo a borda de baixo */
 border-right: 5px solid #000; /* borda direita em 5px na cor preta */
 border-bottom: 5px solid #000; /* borda inferior em 5px na cor preta */
 top: -13px; left: 4px; position: relative; /* posiciono o elemento para encaixar */
 }
#menu ul li.active:after {
 content:'';
 padding: 5px; /* um espaçamento de 5px é suficiente */
 background: green; /* mesmo fundo da página */
 width:2px;
 height: 2px;
 float:right;
 border-radius: 0 100% 0 0; /* curvo a borda da direita */
 border-right: 5px solid #000; /* borda direita em 5px na cor preta */
 border-top: 5px solid #000; /* borda superior em 5px na cor preta */
 top: -4px; left:4px; position: relative; /* posiciono o elemento para encaixar */
 }

#menu {
 float:left;
width: 195px; 
font-family: sans-serif

}
#conteudo {
  margin-left: 230px;
  border: 1px solid #000;
  width: 220px;
  height: 350px;
  background: #000;
}
#menu ul li {
 list-style:none; 
 border-radius: 10px 0 0 10px;  
 border-style: solid;
 boder-color: #000;
 border-width: 1px 0 1px 1px;
 margin:20px 0;
 width: 190px;
 height:80px;
 background: #8bc34a;

}
#menu ul li a:hover{
  background: #ccc;
}
#menu ul li a {
 display:block;
 padding:10px;
 width: 168px;
 height: 58px;
 border: 1px solid #000; 
 line-height: 58px;
 text-decoration:none;
 border-radius: 10px 0 0 10px; 
}
#menu ul li.active a {
 background: #000;
 color: #fff;
}

<div style="width: 100%; height: 600px; background: green">


<div id="menu">
<ul>
  <li class="active"><a href="#">exemplo 1 ativo</a></li>
  <li><a href="#">exemplo 2</a></li>
  <li><a href="#">exemplo 2</a></li>
</ul>
</div>
<div id="conteudo">
<div>
</div>

</div>

JSFiddle