Good afternoon to all the community.
Is there a way to make this tab only with CSS?
I have tried to use a circle as a base and after and before the same, circles but I can not get the correct shape.
.scroller {
width: 80px;
height: 80px;
position: absolute;
top: -40px;
background-color: $secondary;
border-radius: 100%;
&:before {
content: '';
width: 80px;
height: 80px;
border-radius: 100%;
position: absolute;
left: -30px;
bottom: -18px;
border: 40px solid rgba($secondary, 0.5);
}
}
First, you need a container that hides the bottom of the circle. The blue bar cannot because if it hides the overflow it would do so both down and up.
Second, whatever it is
$secondary
it can't be a flat color because then you use it as rgba which expects 3 numbers separated by commas.The following example has a circle made with pure CSS, where the spline of your image is not there and the union of the circle here is in practice a corner.
Then I put an example using an SVG path, which is already more elaborate. But you could even do it with a background image.
Note that I put the chevron-down in another pseudo-selector, since if it were the content of the circle you would not be able to modify its vertical position exactly to your liking.Edit 1: I put the chevron down as a link, it's easier to manipulate.
Edit 2 : I made the spline in the union with SVG, it is not the most convenient and it is better to use an editor like inkscape.
Edit 3 : I left a third example using clip-path.