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>