<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%);
}
.box {
width: 220px;
height: 64px;
position: relative;
background-color: #ff79b7;
margin: 5px;
clip-path: path(
"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"
);
}
.box::after {
content: "";
position: absolute;
top: 8px;
right: 8px;
bottom: 8px;
left: 8px;
background-color: #fff;
clip-path: path(
"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"
);
}
.box__2 {
background-color: #71c2df;
clip-path: path(
"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"
);
}
.box__2::after {
clip-path: path(
"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"
);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.