<svg width="222px" height="66px" viewBox="0 0 222 66" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="sr-only">
<defs>
<clipPath id="path-1">
<path d="M1,1 C1,1 221,1 221,1 C221,1 221,65 221,65 C221,65 19.5,65 19.5,65 C19.5,65 1,45.5 1,45.5 C1,45.5 1,1 1,1 Z" stroke="#979797" fill="none"></path>
</clipPath>
<clipPath id="path-2">
<path d="M1,1 C1,1 205,1 205,1 C205,1 205,49 205,49 C205,49 15,49 15,49 C15,49 1,34 1,34 C1,34 1,1 1,1 Z" stroke="#D0021B" fill="none"></path>
</clipPath>
<clipPath id="path-3">
<path d="M1,1 C1,1 221,1 221,1 C221,1 221,45.5 221,45.5 C221,45.5 202.5,65 202.5,65 C202.5,65 1,65 1,65 C1,65 1,1 1,1 Z" stroke="#979797" fill="none"></path>
</clipPath>
<clipPath id="path-4">
<path d="M1,1 C1,1 203,1 203,1 C203,1 203,32.5 203,32.5 C203,32.5 190,46.5 190,46.5 C190,46.5 1,47 1,47 C1,47 1,1 1,1 Z" stroke="#D0021B" fill="none"></path>
</clipPath>
</defs>
</svg>
<div class="box"></div>
<div class="box box__2"></div>
@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
width: 100vw;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: "Exo", Arial, sans-serif;
font-size: 20px;
font-weight: 600;
background: linear-gradient(to bottom, #0b0a27, #31304c 50%);
}
.sr-only {
border: 0 !important;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap;
}
.box {
width: 220px;
height: 64px;
margin: 5px;
background-color: #ff79b7;
clip-path: url(#path-1);
position: relative;
}
.box::after {
content: "";
position: absolute;
top: 8px;
right: 8px;
bottom: 8px;
left: 8px;
background-color: #fff;
clip-path: url(#path-2);
}
.box__2 {
background-color: #71c2df;
clip-path: url(#path-3);
}
.box__2::after {
clip-path: url(#path-4);
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.