CSS - Button with two cut off corners [duplicate] - html

Question

This question already has answers here:
Cut Corners using CSS
(16 answers)
Closed 6 years ago.
Hi all, I want to create a <button> like the one you can see in the above image, with background: transparent; border: 1px solid #999. I have checked a previous similar question with the same problem, but since it's 3 years old I would to check if there are better solutions.
Do you have an idea on how to achieve this result? Thanks in advance for your replies!

Answer 1

You could do something like this with :before and :after pseudo elements
body {
background: white;
}
button {
padding: 20px 45px;
border: 1px solid #999999;
display: inline-block;
position: relative;
background: white;
color: #999999;
}
button:before, button:after {
height: 25px;
width: 25px;
background: white;
position: absolute;
content: '';
}
button:before {
top: 0;
left: 0;
border-right: 1px solid #999999;
transform: rotate(49deg) translate(-71%);
}
button:after {
bottom: 0;
right: 0;
border-left: 1px solid #999999;
transform: rotate(49deg) translate(71%);
}
<button>CLICK ME</button>
Or you can use SVG
button {
display: inline-block;
background: transparent;
border: none;
}
polygon {
stroke: #999999;
fill: transparent;
stroke-width: 1px;
transition: all 0.3s ease-in;
}
text {
fill: #999999;
font-size: 20px;
transition: all 0.3s ease-in;
}
button:hover polygon {
fill: black;
}
button:hover text {
fill: white;
}
<button>
<svg width="200px" height="100px">
<polygon points="165.083,84.769 15.971,84.769 15.971,28.227 33.742,11.263 185.114,11.263 185.114,66.837 "/>
<text x="100" text-anchor="middle" y="55">CLICK ME</text>
</svg>
</button>

Answer 2

Here's a JS fiddle with a little trick I use with :before and :after.
See this fiddle
button { background: #fff; padding: 8px 10px; border: 1px solid #333; box-shadow: none; position: relative; }
button:before {content: ""; width: 10px; height: 15px; position: absolute; border-right: 1px solid #333; left: -5px; top: -6px; transform: rotate(45deg); background: #fff}
button:after {content: ""; width: 10px; height: 15px; position: absolute; border-left: 1px solid #333; right: -5px; bottom: -6px; transform: rotate(45deg); background: #fff}
You can replace background of :before and :after with yours to fit it correctly.

Answer 3

you should not use transparent background you should use url property like this
.selector{
background: url(imageAddress);
}