I'm currently tackling a project that involves creating SVG shapes with strokes that adjust responsively to the size of their parent container. My aim is for these shapes to consistently fill the width and height of the parent container, and I intend to position them absolutely within the parent element. Moreover, I need to incorporate stroke colors into these shapes.
An issue I've run into pertains to the consistency of stroke widths. Despite setting the stroke width to 1px, at times it appears significantly thicker, possibly exceeding 10px, resulting in distorted shapes.
Here's an illustration of my desired outcome: I applied a 1px stroke width here, but it seems exaggerated. Additionally, the stroke widths on the top, bottom, left, and right appear varied even though they are set at 1px each. How can I introduce a 5px border radius to this path?
body {
padding: 100px 20px;
}
.parent-container {
width: 100%;
height: 400px;
background: black;
clip-path: polygon(
0% 0%,
95% 0%,
100% 20%,
100% 100%,
5% 100%,
0% 80%,
0% 0%
);
position: relative;
}
.cta-stroke {
position: absolute;
inset: 0px;
width: 100%;
height: 100%;
}
path {
stroke-width: 1px;
stroke: red;
}<!doctype html>
<html>
<head>
<title>svg shapes</title>
</head>
<body>
<div class="parent-container">
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" fill="none" preserveAspectRatio="none"
class="cta-stroke">
<path d="M0 0 L95 0 L100 20 L100 100 L5 100 L0 80 L0 0 Z" />
</svg>
</div>
</body>
</html>How can I ensure that SVG shapes with responsive strokes align properly with the size of their parent container and retain consistent stroke width? Furthermore, what steps should I take to introduce rounded corners to these shapes? Any assistance or advice on this matter would be highly appreciated. Thank you!