Search code examples
css

Corners cut CSS


Cutoff corners on buttons Cutoff corners on buttons

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:

enter image description here

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.


Solution

  • I have an online generator and a detailed article for this:

    CSS cut corner generator

    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>