I've created a div with a dynamic size and border but I'm looking to add corner borders, including one skewed corner, using svg. However, I'm running into an issue where the vertical and horizontal lines are not appearing at the same size.
I've tried adjusting the preserveAspectRatio attribute in different ways but haven't been successful in achieving equal line sizes for both directions within the div.
If anyone has suggestions on how to make the vertical and horizontal lines the same size in svg while filling the div, please feel free to share.
.container {
position: relative;
background-color: black;
border: 1px solid red;
padding: 25px;
color:white;
}
.container > svg {
position: absolute;
left: 0;
top: 0;
}
.container > svg > path {
stroke: red;
} <div class="container">
<svg width='100%' height='100%' viewBox='0 0 100 100' preserveAspectRatio='none'>
<path
d='M0,0 H25 M0,0 V25'
fill='none'
stroke-width='5'
vector-effect='non-scaling-stroke'
/>
<path
d='M90,0 L75,0 M90,0 L100,10 M100,10 L100,25'
fill='none'
stroke-width='5'
vector-effect='non-scaling-stroke'
/>
<path
d='M100,100 L75,100 M100,100 L100,75'
fill='none'
stroke-width='5'
vector-effect='non-scaling-stroke'
/>
<path
d='M0,90 L0,75 M0,90 L10,100 M10,100 L25,100'
fill='none'
stroke-width='5'
vector-effect='non-scaling-stroke'
/>
</svg>
<p>fancy text here</p>
</div>