How to implement special button shape in css [duplicate] - css

Question

This question already has answers here:
Cut Corners using CSS
(16 answers)
Closed 6 months ago.
I would like to create a button with a special shape (border) like the attached image. Is that even possible with css?

Answer 1

I tried to replicate this button but there are some issues with it:
I have used clip-path property to draw a custom border for the button, however, you have to mention the height and width properties separately or instead just let it span the default length, i.e. it's container dimensions but I had to mention height and width properties due to the reason in the following points
Thanks to this answer for a similar problem of adding border to a clipped path element, which states that it's not possible to add a border to a clipped path because the border is applied to the original rectangle (or square) container before the clip-path is applied and so, it also gets clipped out. I used the solution that's mentioned in that answer, which is use a div as the background of this button with slightly bigger dimensions with the same clipped path but of different color which acts as a border to the button
Finally, I had to mention the dimensions of the parent div which acts as a background so that I could know the exact values of the dimension of the container and hence I could use them to know how much height and width should the button have
div {
display: inline-block;
position: relative;
background: red;
-webkit-clip-path: polygon(100% 0, 100% 81%, 82% 100%, 0 100%, 0 0);
clip-path: polygon(100% 0, 100% 81%, 82% 100%, 0 100%, 0 0);
height: 60px;
width: 140px;
}
button {
position: absolute;
top: 2px;
left: 2px;
height: 56px;
width: 136px;
-webkit-clip-path: polygon(100% 0, 100% 81%, 82% 100%, 0 100%, 0 0);
clip-path: polygon(100% 0, 100% 81%, 82% 100%, 0 100%, 0 0);
font-size: 20px;
text-align: center;
color: white;
background: pink;
border: none;
}
<div class="btn_bg">
<button>Certified?<br>Let us know</button>
</div>

Answer 2

you can use this code with clip-path
.outside {
position: relative;
width: 70vmin;
height: 23vmin;
background: tomato;
clip-path: polygon(85% 0%, 85% 68%, 68% 100%, 0% 100%, 0% 78%, 0% 0%, 0% 0%);
}
.inside {
position: absolute;
top: 4px;
left: 4px;
right: 4px;
bottom: 4px;
background: white;
clip-path: polygon(85% 0%, 85% 68%, 68% 100%, 0% 100%, 0% 78%, 0% 0%, 0% 0%);
border:none;
}
<div class="outside">
<button class="inside">
</button>
</div>