<div id="wrap">
<!-- section -->
<div class="section">
<div class="center">
<div id="bordered"></div>
</div>
</div>
<!--/section -->
</div>
html,
body {
margin: 0;
padding: 0;
font-family: sans-serif;
font-size: 16px;
line-height: 1.4;
color: #555;
background: #fbffa3;
animation: changeBg 5s linear infinite;
}
@keyframes changeBg {
0%, 100% {
background: #fbffa3;
}
25% {
background: #a3ffff;
}
50% {
background: #ffb1a3;
}
75% {
background: #ffa3f4;
}
}
* {
box-sizing: border-box;
}
#wrap {
position: relative;
}
.section {
padding: 40px;
}
@borderW: 4px;
#bordered {
width: 200px;
height: 100px;
background: #1daa4e;
margin: auto;
position: relative;
&::before {
content: '';
display: block;
position: absolute;
top: -10px;
right: -10px;
bottom: -10px;
left: -10px;
border: @borderW solid #f00;
animation: clipRotate 4s linear infinite;
}
}
@keyframes clipRotate {
0%,
100% {
clip-path: polygon(0 0, 100% 0, 100% @borderW, 0 @borderW);
}
25% {
clip-path: polygon(calc(~'100% -' @borderW) 0, 100% 0, 100% 100%, calc(~'100% -' @borderW) 100%);
}
50% {
clip-path: polygon(0 calc(~'100% -' @borderW), 100% calc(~'100% -' @borderW), 100% 100%, 0 100%);
}
75% {
clip-path: polygon(0 0, @borderW 0, @borderW 100%, 0 100%);
}
}
View Compiled
This Pen doesn't use any external CSS resources.