Can someone help me with that effect?

Asked

Viewed 128 times

-3

Does anyone know how to do that "curve" effect on a div? link to img

inserir a descrição da imagem aqui

I was trying to do more I couldn’t. The code I was using:

body{
    height: 100vh;
    width: 100vh;
    background:#7ABCFF;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    
}
.menuCont{
    width: 100%;
    height: 10%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    align-content: center;
}
.menu{
    background: #fff;
    width: 60%;
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    border-radius: 20px 20px 0 0px; 
}
.icons{
    width: 20%;
    height: 100%;
}
.menuCurva{
    background: #fff;
}
.menuCurva:before{
    content:'';
    padding: 5px; /* um espaçamento de 5px é suficiente */
    background: #fff; /* mesmo fundo da página */
    width:2px;
    height: 50%;
    float:right;
    position:relative;
    border-radius: 100% 0 0 0; /* curvo a borda de baixo */ /* borda inferior em 5px na cor preta */
    position: relative;
    left: 1px;
}

.menuCurva:after {
    content:'';
    padding: 5px; /* um espaçamento de 5px é suficiente */
    background: #fff; /* mesmo fundo da página */
    width:2px;
    height: 40%;
    float:left;
    border-radius: 0 100% 0 0; /* curvo a borda da direita */
    right: 1px; 
    position: relative;
    bottom: 19px;
}

.teste{
    width: 100%;
    height: 40%;
    background: #7ABCFF;
    border-bottom-left-radius: 100%;
    border-bottom-right-radius: 100%;
}
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="menuCont">
        <div class="menu">
            <div class="icons">

            </div>
            <div class="icons">

            </div>
            <div class="icons menuCurva">
                <div class="teste">

                </div>
            </div>
            <div class="icons">

            </div>
            <div class="icons">

            </div>
        </div>
    </div>
</body>
</html>

html css
  • 1

    Do not post the question again if it has already been closed, read the reason for closing and improve the old question

  • This may help you https://answall.com/questions/299864/c%C3%adrculo-with-curved-edge

  • thanks a lot, I’ll take a look, I think it will help me a lot

2 answers

5


Follow an example using pseudo elements with the same bar color, and a circle in the center with the border color equal to the background color.

First look with different colors to identify the elements

inserir a descrição da imagem aqui

Now with the right colors

inserir a descrição da imagem aqui

Following the code the image above, notice mainly the alignment of the pseudo elements and the circle 

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  background: tomato;
}
.bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
  background-color: navy;
}
.bar::before,
.bar::after {
  content: "";
  position: absolute;
  top: -25px;
  height: 100px;
  width: calc(50% - 50px);
  border-radius: 0 20px 0 0;
  background-color: navy;
}
.bar::before {
  left: 0;
}
.bar::after {
  border-radius: 20px 0 0 0;
  right: 0;
}
.boll {
  width: 100px;
  height: 100px;
  background-color: green;
  border: 10px solid tomato;
  position: absolute;
  margin: auto;
  top: -50%;
  left: 0;
  right: 0;
  border-radius: 50%;
  box-sizing: border-box;
  z-index: 1;
}
<div class="bar">
  <div class="boll"></div>
</div>

2

Another very simple way to do this effect, using pseudo-elements and border-radius. I changed the position of .menuCurva to fit inside the div .icons where he is.

Error: body width is wrong. It should be 100wh and not 100vh.

A remark: this menu should be done with fixed dimensions, since, by its structure, I do not seem to claim to be responsive.

In the example below I made it with fixed dimensions of 300x60. It is important that the Divs .icons are square, that is to say, the height 60px and are 5 icons, so the width should be 300px (result of 5 * 60px).

Take the example:

body{
    height: 100vh;
    width: 100wh;
    background:#7ABCFF;
    flex-wrap: nowrap;
}

.menu, .icons, .menuCurva{
   display: flex;
   align-items: center;
   justify-content: center;
}

.menuCont{
    width: 300px;
    height: 60px;
    flex-wrap: nowrap;
    position: relative;
    top: 60px; /* remova isto */
}

.menu{
    width: 100%;
    height: 100%;
    flex-wrap: nowrap;
    justify-content: space-between;
    border-radius: 30px 30px 20px 20px; 
    position: relative;
}
.icons{
    width: 20%;
    height: 100%;
    position: relative;
    background: #fff;
    box-sizing: border-box;
}

.icons:nth-child(1){
   border-radius: 40% 0 0 25%;
}

.icons:nth-child(1)::before{
   content: '';
   position: absolute;
   top: 0;
   right: -4px;
   background: #fff;
   height: 100%;
   width: 4px;
}

.icons:nth-child(2){
   border-top-right-radius: 50%;
   left: 4px;
   padding-right: 4px;
}

.icons:nth-child(3)::after{
   content: '';
   width: calc(100% + 10px);
   height: 100%;
   background: #7ABCFF;
   border-radius: 50%;
   bottom: 50%;
   position: absolute;
   z-index: 1;
}

.icons:nth-child(4){
   border-top-left-radius: 50%;
   left: -4px;
   padding-left: 4px;
}


.icons:nth-child(5){
   border-radius: 0 40% 25% 0;
}

.icons:nth-child(5)::before{
   content: '';
   position: absolute;
   top: 0;
   left: -4px;
   background: #fff;
   height: 100%;
   width: 4px;
}

.menuCurva{
   background: navy;
   border-radius: 50%;
   position: absolute;
   bottom: 65%;
   left: 50%;
   -webikit-transform: translateX(-50%);
   transform: translateX(-50%);
   width: 100%;
   height: 100%;
   z-index: 2;
   font-weight: bold;
   color: #fff;
}
<div class="menuCont">
  <div class="menu">
      <div class="icons">
         +
      </div>
      <div class="icons">
         +
      </div>
      <div class="icons">
          <div class="menuCurva">
            +
          </div>
      </div>
      <div class="icons">
         +
      </div>
      <div class="icons">
         +
      </div>
  </div>
</div>

  • 1

    Became very good uncle tb!

Browser other questions tagged html css

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