<div class="project-card">
  <div class="project-card__inner">
    <div class="project-card__inner-inner"></div>
  </div>
</div>
body {
  background: #f4f4f2;
}

.project-card {
  position: relative;
  display: flex;
  width: 430px;
  height: 230px;
  border-radius: 24px 24px 0px 24px;
  border: 1px solid #4a4a4a;
  backface-visibility: hidden;
}
.project-card__inner {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 99px;
  height: 99px;
  border-right: 1px solid #f4f4f2;
  border-bottom: 1px solid #f4f4f2;
  z-index: 10;
  background: #f4f4f2;
  backface-visibility: hidden;
}
.project-card__inner::before {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 33px;
  height: 33px;
  border-radius: 0 0 24px 0;
  border: 0;
  border-bottom: 1px solid #4a4a4a;
  border-right: 1px solid #4a4a4a;
  backface-visibility: hidden;
}
.project-card__inner::after {
  content: "";
  position: absolute;
  top: 0;
  right: -1px;
  width: 33px;
  height: 33px;
  border-radius: 0 0 24px 0;
  border: 0;
  border-bottom: 1px solid #4a4a4a;
  border-right: 1px solid #4a4a4a;
  backface-visibility: hidden;
}
.project-card__inner-inner {
  width: 34px;
  height: 34px;
  border-radius: 24px 0;
  border: 0px;
  border-top: 1px solid #4a4a4a;
  border-left: 1px solid #4a4a4a;
  position: absolute;
  top: calc(50% - 16.5px);
  left: calc(50% - 16.5px);
  backface-visibility: hidden;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.