Is it possible to produce the following shape containing a number with CSS:

I've found tons of examples with a solid background and no border, but those don't apply.

CodePudding user response：

Yes, it is possible with CSS. You would have to use a container element for the shape, clip-path to make the polygon and add the border with a pseudo element:

div.shape {
  box-sizing: border-box;

  /* position */
  position: relative;
  display: grid;
  justify-content: center;
  align-content: center;
  
  --color: blue;
  --size: 2rem;
  --slant: 30%;
  width: var(--size);
  height: var(--size);
  background: blue;
}

/* the border is the ::before pseudo element, it has the same polygon but is slightly smaller */
div.shape::before {
    content: "";
  --border-width: 4px;
  position: absolute;
  top: calc(var(--border-width) / 2);
  left: calc(var(--border-width) / 2);
  width: calc(var(--size) - var(--border-width));
  height: calc(var(--size) - var(--border-width));
  
  background: white;
}

div.shape, div.shape::before {
  /* notches */
  clip-path: polygon(0 var(--slant), var(--slant) 0, 100% 0, 100% calc(100% - var(--slant)),  calc(100% - var(--slant)) 100%, 0 100%);
}

p {
  position: relative;
  color: var(--color);
  font-size: 1.2rem;
}

<div >
  <p>1</p>
</div>

CodePudding user response：

I already did something similar here: https://codepen.io/t_afif/pen/bGooZmq

I will update a few values to get the corners you want:

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(var(--slant) 0, 100% 0, 100% calc(100% - var(--slant)),
      calc(100% - var(--slant)) 100%, 0 100%,0 var(--slant));
  transition: color var(--t,0.3s), background-size 0.3s;
}
button:hover,
button:active{
  background-size: 100% 100%;
  color: #fff;
  --t: 0.2s 0.1s;
}
button:focus-visible {
  outline-offset: calc(-1*var(--border));
  outline: var(--border) solid #000a;
}
button:active {
  --s: #0005;
  transition: none;
}



body {
  display:grid;
  grid-auto-flow:column;
  grid-gap:20px;
  place-content:center;
  margin:0;
  height:100vh;
  background:#eee;
}

<button>Button</button>
<button style="--color:#f3738a;--border:2px;--slant:.5em">Button</button>
<button style="--color:#69db3a;--slant:40px;--border:8px">Button</button>