Circle with curved edge

Question

Circle with curved edge

Navigation

#1 by (5 votes)
#2 by (3 votes)

10

I was tasked to make 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 I need (Photoshop)

WhatIhave

IwouldlikeaCSSsolution,butIcouldnot

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

html css svg css-border-radius css-border

asked by anonymous 18.05.2018 / 04:02

2 answers

3

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

Here's how:

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>

18.05.2018 / 05:55

score 5 · Accepted Answer

Using filters of SVG I believe you get a result close to that of the image. I will not go into details because the subject is extensive. But I commented in the code where you control the intensity of the curvature between the ball and the bar. And below are some explanations.

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

To understand better, see the example below. Also see that it works from IE 10 forward = D link

OBS: I left a background image in the background and an animation at the end of CSS just to see what the interaction of the filter effect between the elements is like. I know you do not need the animation, but it's just for educational purposes, okay.

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 style="display: none;">
    <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>

SVG Filters link
Applying filters to SVG elements in HTML Elements link