[motion-1] Define or clarify the motion path along the inner side of the border
yisibl opened this issue · comments
If is omitted, it defaults to inset(0 round X), where X is the value of border-radius on the element that establishes the containing block for this element.
In the current definition with offset-path: content-box, the element cannot move along the inside of the border (the blue border in the video). Manually fine-tuning the X value in round X is painful and would like a way to achieve such a motion path. This is very useful when implementing some animations of the border.
Likewise, there doesn't seem to be a way to move along the outside of the border.
2023-05-11.23-45-35.mp4
:root {
--r: 60px 120px / 100px 30px;
}
#outer {
margin: 60px auto;
position: relative;
width: 500px;
height: 200px;
border: 30px solid blue;
border-radius: var(--r);
}
#red-box {
width: 0;
height: 0;
offset-path: content-box;
offset-distance: -3%;
offset-rotate: auto 0deg;
outline: 6px solid red;
position: absolute;
}Expected
Currently, we need to fit the rounded corners with the following CSS, which is troublesome once the border-radius of the containing block has changed.
#red-box {
offset-path: inset(0 round 30px 0px / 70px 0px) content-box;
}