After spending a significant amount of time searching today, I have yet to find a solution to my specific issue.
I modified a SASS mixin we use for generating CSS open arrows in our projects. These are typically used for faux arrows and navigation elements.
The challenge I'm facing is determining the correct positioning shift for the element when:
a) A rotation occurs
b) The width of the line/border changes.
I know that there is probably some simple math involved in solving this problem, but it has been so long since I've delved into these calculations!
Here's an example snippet of code:
p {
color: red;
width: 100px;
font-family: Arial;
text-transform: uppercase;
position: relative;
}
p::before {
content: '';
display: inline-block;
position: absolute;
top: 50%;
right: 0rem;
height: .125rem;
width: .875rem;
background: currentColor;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transition: .25s cubic-bezier(0.39, 0.575, 0.565, 1);
transform-style: preserve-3d;
transform: translateX(-100%) translateY(-100%) rotate(45deg);
z-index: 1;
}
p::after {
content: '';
display: inline-block;
position: absolute;
top: 50%;
right: 0rem;
height: .125rem;
width: .875rem;
background: currentColor;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transition: .25s cubic-bezier(0.39, 0.575, 0.565, 1);
transform-style: preserve-3d;
transform: translateY(-100%) rotate(135deg);
z-index: 1;
}<p>Arrow</p>This is what the mixin looks like:
@mixin arrow($width: 1, $length: 6, $position: 0, $placement: right, $rotate: 0) {
position: relative;
&:before,
&:after {
content: '';
display: inline-block;
position: absolute;
top: 50%;
@if ($placement==right) {
right: rem($position);
} @else {
left: rem($position);
}
height: rem($width);
width: rem($length);
background: currentColor;
backface-visibility: hidden;
transition: $transition-speed $transition-easeInOutSine;
transform-style: preserve-3d;
transform: translateZ(0) rotate(#{$rotate}deg);
}
&:before {
transform: translateX(-100%) translateY(-100%) rotate(#{$rotate + 45}deg);
}
&:after {
transform: translateY(-100%) rotate(#{$rotate + 135}deg);
}
.is-active &,
.is-open & {
&:before {
transform: translateX(100%) translateY(-100%) rotate(-#{$rotate + 45}deg);
}
&:after {
transform: translateY(-100%) rotate(#{$rotate + 225}deg);
}
}
}
Here are some examples:
https://i.sstatic.net/MBCLO.png
https://i.sstatic.net/f6thE.png
I hope I have explained my issue clearly. Essentially, I am trying to figure out how to close the gap based on the given numbers!
Thank you for your help in advance!
Please overlook any other imperfections, as this is still a work in progress.