<div class="radius">
<div class="content"></div>
</div>
@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100vw;
min-height: 100vh;
font-family: "Exo", Arial, sans-serif;
background-color: #557;
color: #fff;
display: grid;
gap: 30px;
place-content: center;
}
.radius {
height: 100px;
display: flex;
justify-content: flex-start;
}
.radius::before,
.radius::after {
content: "";
width: 20px;
background: #098fae;
}
.radius::before {
border-radius: 20px 0 0 20px;
}
.content {
background: #098fae;
width: 1px;
transform: scale3d(1, 1, 1);
transform-origin: left;
}
.radius::after {
border-radius: 0 20px 20px 0;
transform: translate3d(0, 0, 0);
}
@keyframes right-animate {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(80px, 0, 0);
}
}
@keyframes center-animate {
0% {
transform: scale3d(1, 1, 1);
}
100% {
transform: scale3d(81, 1, 1);
}
}
.content {
animation: center-animate 1s linear infinite alternate;
}
.radius::after {
animation: right-animate 1s linear infinite alternate;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.