Circle with curved edge

I was tasked with making a website, and I'm having a hard time doing a detail in CSS

I need to make a round border that has a curved end, for you to understand better, I will show photo and post my code

What do I need (Photoshop) insert the description of the image here

What do I have insert the description of the image here

I would like a CSS solution, but I couldn't get 

.bottom-bar {
  background: #29a7e8;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50px;
  text-align: center;
}

.circle {
  display: inline-block;
  position: relative;
  top: -10px;
  border-radius: 100%;
  background: #29a7e8;
  width: 60px;
  height: 60px;
  margin: 0 1rem;
}
<div class="bottom-bar">
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
</div>
Author: bfavaretto, 2018-05-18
Source

2 answers

Using the filters of the SVG I believe that vc achieves a result very close to that of the image. I will not go into detail because the subject is extensive. But I Left commented on the code where vc controls the intensity of the curvature enters the ball and the bar. And below I leave some explanations.

insert the description of the image here

Note that the SVG tag has only the filter and filter settings. After setting them I used filter:url(#filter) to call the filter in the bar and US elements that are inside. So I needed a new div outside (.base) to avoid distortions in the corners of the bar that will receive the filter.

To better understand see the example below. See also what works from IE 10 forward: https://caniuse.com/#feat=svg-filters

Note: I left a background image in the background and an animation at the end of the CSS just for you to see what the filter effect interaction between the elements is like. I know not it needs the animation, but it's for teaching purposes only, ok.

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.base {
    background: #29a7e8;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50px;
}
.bottom-bar {
    background: #29a7e8;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50px;
    text-align: center;
    filter: url(#filter);
}
.circle {
    display: inline-block;
    position: relative;
    top: -10px;
    border-radius: 100%;
    background: #29a7e8;
    width: 60px;
    height: 60px;
    margin: 0 1rem;
}
/* apenas exemplo */
.circle:nth-child(2) {
-webkit-animation: anima 2s infinite ease;
        animation: anima 2s infinite ease;
}
@-webkit-keyframes anima {
50% {
    top: -100px;
}
}
@keyframes anima {
50% {
    top: -100px;
}
}
body {
background: url(http://unsplash.it/600/400);
background-size: cover;
background-position: center;
overflow: hidden;
}
<div class="base">
    <div class="bottom-bar">
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
    </div>
</div>

<svg>
    <defs>
        <filter id="filter">
        <!-- aqui vc controla a curvatura entre a bola e a barra, deixei 5 para ficar acentuado e vc perceber, mas com 3 fica como vc quer mais suave -->
        <feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur"/> 
        <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="filter"/>
        <feComposite in="SourceGraphic" in2="filter" operator="atop"/>
        </filter>
    </defs>
</svg>
 8
Author: hugocsl, 2020-03-06 18:39:41

You can create two pseudo-elements ::before and ::after with curve (border-radius) at the bottom edge (bottom) and position them at their respective corners.

Here's how it looks:

insert the description of the image here

Code: 

.bottom-bar {
  background: #29a7e8;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50px;
  text-align: center;
}

.circle {
  display: inline-block;
  position: relative;
  top: -10px;
  border-radius: 100%;
  background: #29a7e8;
  width: 60px;
  height: 60px;
  margin: 0 1rem;
}

.circle::before,
.circle::after{
   content: '';
   background: #fff; /* mesma cor do fundo da página */
   padding: 1px 1px 0;
   width: 6px;
   height: 2px;
   position: absolute;
   border-bottom: 2px solid #29a7e8; /* borda inferior na cor azul */
   z-index: -1;
   top: 7px;
}

.circle::before{
   left: 2px;
   border-radius: 0 0 100% 0;
}

.circle::after{
   right: 2px;
   border-radius: 0 0 0 100%;
}
<div class="bottom-bar">
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
</div>
 4
Author: Sam, 2018-05-18 10:51:58