How to make a border with a radius become fully rounded when there are only two sides?
I want to use HTML / CSS / JS to create an animation type like this gif . I use :: before and :: after to create two "semicircles" with a border radius: 50%, but I noticed that even when the two borders are removed, it will still taper around the element. It's kind of difficult to explain, but this is it , and I'm sure you can see what I mean.
Here's a snippet:
.animation-container {
height: 100px;
width: 100px;
position: relative;
}
.animation-container::before, .animation-container::after {
content: '';
display: inline-block;
position: absolute;
border: 5px solid red;
border-radius: 50%;
}
.animation-container::before {
height: 100px;
width: 100px;
top: 0;
left: 0;
border-right: none;
border-top: none;
}
.animation-container::after {
height: 50px;
width: 50px;
top: 25px;
left: 25px;
border-left: none;
border-bottom: none;
}
<!DOCTYPE html>
<html>
<head>
<title>Tests Page</title>
<link rel="stylesheet" href="/main.css">
</head>
<body>
<div class="animation-container"></div>
</body>
</html>
+3
source to share
2 answers
Is there a particular reason why you are using animation? The GIF is actually much more efficient than animation in this scenario ... Anyway, you cannot prevent the narrowing, as it is logical to happen with an effect like border-radius ...
Maybe you could use something like this?
https://jsfiddle.net/vocfgfjn/1/
HTML:
<div class="box"></div>
CSS
.box{
width:100px;
height:100px;
border:solid 5px #000;
border-color:#000 #000 transparent transparent;
border-radius: 100px 100px 100px 0;
}
+3
source to share
What do you think about creating your own semicircle?
.half-circle {
width: 100px;
height: 100px;
position: relative;
border: 5px solid red;
border-radius: 50%;
animation: rotateAnim 1s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.half-circle:after{
content: "";
position: absolute;
top: -5px;
left: 50%;
right: -5px;
bottom: -5px;
background: #FFF;
}
@keyframes rotateAnim {
from {transform: rotate(0);}
to {transform: rotate(360deg);}
}
<div class="half-circle"></div>
+2
source to share