As usual, the question indicated as a duplicate has outdated or incoherent answers
This question is about SVGs
I'm not interested by "hacks" with box shadows or pseudo elements, they multiply tech debt and always end up posing other problems
I'm trying to create a shape to be used with clip-path on buttons and dialogs
The shape is fairly simple:
However, when applied to rectangular buttons, the edges get scaled down (as they should). Making it look wrong :
Ideally, I would want this path to scale like this :
Is it possible to give a fixed position to path curves but not its lines ?
.svg {
position: absolute;
width: 0;
height: 0;
}
.clipped {
height: 3rem;
background-color: green;
color: white;
border: none;
clip-path: url(#my-clip-path);
}<svg class="svg">
<clipPath id="my-clip-path" clipPathUnits="objectBoundingBox"><path d="M0,0.1 v0.8 c0.05,0,0.1,0.05,0.1,0.1 h0.8 c0,-0.05,0.05,-0.1,0.1,-0.1 v-0.8 C0.95,0.1,0.9,0.05,0.9,0 h-0.8 C0.1,0.06,0.05,0.1,0,0.1"></path></clipPath>
</svg>
<button class="clipped">Some rectangular button</button>