I'm trying to create buttonswith the cutoff corners being transparent? I have a first approach which basically consists of 1 :before and 1 :after element, therefore removing the unnecesarry borders of the original box with a fixed color and I just add the inner border, but this creates the issue that those after and before elements can not be transparent, they look like this:
Just to be clear, I know how to move the elements, I'm just looking for a different approach that allows those cutoff parts to be transparent.
I have an online generator and a detailed article for this:
button {
position: relative;
padding: 20px 30px;
font-size: 20px;
border:none;
background: none;
}
button:before {
content: "";
position: absolute;
inset: 0;
background: red;
clip-path: polygon(0 30.00px,30.00px 0,100% 0,100% calc(100% - 30.00px),calc(100% - 30.00px) 100%,0 100%,0 30.00px,5px calc(30.00px + 2.07px),5px calc(100% - 5px),calc(100% - 30.00px - 2.07px) calc(100% - 5px),calc(100% - 5px) calc(100% - 30.00px - 2.07px),calc(100% - 5px) 5px,calc(30.00px + 2.07px) 5px,5px calc(30.00px + 2.07px));;
}
<button> some text here </button>
Here is another idea with a code where you can adjust CSS variable if you don't want to generate a code
button {
--border: 5px; /* the border width */
--slant: 0.7em; /* control the slanted corners */
--color: #37E8FC; /* the color */
font-size: 35px;
padding: 0.4em 1.2em;
border: none;
cursor: pointer;
font-weight: bold;
color: var(--color);
background:
linear-gradient(to bottom right,var(--color) 50%,#0000 50.1%) top left,
linear-gradient(to top left ,var(--color) 50%,#0000 50.1%) bottom right;
background-size: calc(var(--slant) + 1.3*var(--border)) calc(var(--slant) + 1.3*var(--border));
background-repeat: no-repeat;
box-shadow:
0 0 0 200px inset var(--s,#0000),
0 0 0 var(--border) inset var(--color);
clip-path:
polygon(100% 0, var(--slant) 0, 0 var(--slant),
0 100%, calc(100% - var(--slant)) 100%,100% calc(100% - var(--slant))
);
transition: color var(--t,0.3s), background-size 0.3s;
}
button:focus-visible {
outline-offset: calc(-1*var(--border));
outline: var(--border) solid #000c;
clip-path: none;
background-size: 0 0;
}
button:hover,
button:active{
background-size: 100% 100%;
color: #fff;
--t: 0.2s 0.1s;
}
button:active {
--s: #0005;
transition: none;
}
body {
display:grid;
grid-auto-flow:column;
grid-gap:20px;
place-content:center;
margin:0;
height:100vh;
}
<button>Button</button>
<button style="--color:#f3738a;--border:3px;--slant:.5em">Button</button>