A rendering issue arises when the previous sibling of a shape divider has a fractional size (e.g., 100.3px). This issue is not specific to the SVG itself, as it also occurs when using a basic <div> with a background color.
Possible Solutions
1. Using Negative Margin
Apply a small negative margin to the shape divider to correct the alignment.
.shape-divider {
margin-top: -1px;
}
2. Rounding the Fractional Size
Round the height of the previous sibling element to avoid fractional values.
.previous-sibling {
height: round(nearest, 70vh, 1px);
}
