Cut corners of container using CSS - css

Question

Im trying to cut the corners of a container using css like this
what im trying to achieve
I tried using clip-path but I cant manage to make the cuts rounded like in the picture above
what i have so far
clip-path: polygon(0 0,100% 0,100% calc(100% - 50px),calc(100% - 100px) calc(100% - 50px),calc(100% - 120.40px) 100%,0 100%);

Answer 1

I don't think you can do that with polygon clip-path only, there are outer angles and inside angles...
With svg it can be possible but a bit tricky.
First needed to design the svg shape by itself (red fill is only to view something in the svg editor: inkscape here).
<svg id="clipContainer" width="1920" height="1080" viewBox="0 0 1920 1080" xmlns="http://www.w3.org/2000/svg">
<path style="fill:#ff0000;stroke:none;"
d="m 35,0 h 654.05318 c 6.84803,0 13.02979,2.8828963 16.6429,6.7452744 l 63.1577,76.5094516 C 772.54893,87.959545 779.6304,90 785,90 h 350 c 5.6694,-0.04033 12.8528,-3.528812 17.4966,-8.545814 L 1213.8538,7.1954094 C 1219.2498,1.0400203 1224.6973,0 1230.1965,0 H 1885 c 18.8682,0 35,16.120082 35,35 v 875 c -0.2052,10.54136 -8.9432,19.77096 -20,20 h -608.8105 c -13.0687,-0.12776 -25.0997,3.20977 -33.0435,11.97991 L 1147.2068,1064.9984 C 1134.8748,1081.5357 1126.0043,1080 1106.409,1080 H 35 C 16.13187,1080 0,1063.8799 0,1045 V 35 C 0,16.120082 16.13187,0 35,0 Z"/>
</svg>
now have to put it in HTML body but as a clip-path:
<div class="container">
</div>
<svg width="0" height="0">
<defs>
<clipPath id="svg-clip">
<path style="fill:#ff0000;stroke:none;"
d="m 0.01822917,0 h 0.34065265 c 0.003567,0 0.006786,0.00266925 0.008668,0.0062454 l 0.0328946,0.07083957 c 0.001926,0.0043561 0.005613,0.0062455 0.008408,0.0062455 h 0.18229167 c 0.002953,-3.739e-5 0.006695,-0.0032675 0.009113,-0.0079124 L 0.63221469,0.00666224 C 0.63502588,9.6294739e-4 0.63786313,0 0.64072729,0 H 0.98177075 C 0.99159837,0 1,0.01492547 1,0.03240625 v 0.8101562 c -1.0691e-4,0.009762 -0.004658,0.0183059 -0.0104162,0.0185171 H 0.67249445 c -0.006807,-1.1867e-4 -0.0130727,0.00297 -0.0172102,0.0110924 l -0.0577808,0.11390178 c -0.006423,0.0153109 -0.0110433,0.0138917 -0.0212488,0.0138917 H 0.01822917 C 0.00840202,0.99996424 0,0.98503874 0,0.96755799 V 0.03240625 C 0,0.01492547 0.00840202,0 0.01822917,0 Z"/>
</clipPath>
</defs>
</svg>
plus a bit of css saying container using the clip-path svg-clip:
body {
display: flex;
justify-content: center;
align-items: center;
background-color: grey;
}
.container {
position: relative;
width: 90vw;
height: 90vh;
background-color: #222222;
border-radius: 2vw;
clip-path: url(#svg-clip);
}
Now the problem is the scale! That works but not really following the scale of the container. We will use clipPathUnits="objectBoundingBox" but to do so we need to have value of the path between 0 and 1 (yes yes 1 px!!!). So after edit in inkscape the svg is:
<svg id="clipContainer" width="1920" height="1080" viewBox="0 0 1920 1080" xmlns="http://www.w3.org/2000/svg">
<path style="fill:#ff0000;stroke:none;"
d="m 0.01822917,0 h 0.34065265 c 0.003567,0 0.006786,0.00266925 0.008668,0.0062454 l 0.0328946,0.07083957 c 0.001926,0.0043561 0.005613,0.0062455 0.008408,0.0062455 h 0.18229167 c 0.002953,-3.739e-5 0.006695,-0.0032675 0.009113,-0.0079124 L 0.63221469,0.00666224 C 0.63502588,9.6294739e-4 0.63786313,0 0.64072729,0 H 0.98177075 C 0.99159837,0 1,0.01492547 1,0.03240625 v 0.8101562 c -1.0691e-4,0.009762 -0.004658,0.0183059 -0.0104162,0.0185171 H 0.67249445 c -0.006807,-1.1867e-4 -0.0130727,0.00297 -0.0172102,0.0110924 l -0.0577808,0.11390178 c -0.006423,0.0153109 -0.0110433,0.0138917 -0.0212488,0.0138917 H 0.01822917 C 0.00840202,0.99996424 0,0.98503874 0,0.96755799 V 0.03240625 C 0,0.01492547 0.00840202,0 0.01822917,0 Z"/>
</svg>
That gives the following snippet:
body {
display: flex;
justify-content: center;
align-items: center;
background-color: grey;
}
.container {
position: relative;
width: 90vw;
height: 90vh;
background-color: #222222;
border-radius: 2vw;
clip-path: url(#svg-clip);
}
<div class="container">
</div>
<svg width="0" height="0">
<defs>
<clipPath id="svg-clip" clipPathUnits="objectBoundingBox">
<path style="fill:#ff0000;stroke:none;"
d="m 0.01822917,0 h 0.34065265 c 0.003567,0 0.006786,0.00266925 0.008668,0.0062454 l 0.0328946,0.07083957 c 0.001926,0.0043561 0.005613,0.0062455 0.008408,0.0062455 h 0.18229167 c 0.002953,-3.739e-5 0.006695,-0.0032675 0.009113,-0.0079124 L 0.63221469,0.00666224 C 0.63502588,9.6294739e-4 0.63786313,0 0.64072729,0 H 0.98177075 C 0.99159837,0 1,0.01492547 1,0.03240625 v 0.8101562 c -1.0691e-4,0.009762 -0.004658,0.0183059 -0.0104162,0.0185171 H 0.67249445 c -0.006807,-1.1867e-4 -0.0130727,0.00297 -0.0172102,0.0110924 l -0.0577808,0.11390178 c -0.006423,0.0153109 -0.0110433,0.0138917 -0.0212488,0.0138917 H 0.01822917 C 0.00840202,0.99996424 0,0.98503874 0,0.96755799 V 0.03240625 C 0,0.01492547 0.00840202,0 0.01822917,0 Z"/>
</clipPath>
</defs>
</svg>