Is it possible to make this geometric figure in css and html?

Question

Is it possible to make this geometric figure in css and html? Can't find anything. Can you help me?

Edgar Reynaga · Answer

You can also use the pseudo-classes in CSS to achieve this layout. Depending on what your overall layout looks like, try this:

html {
  background-color: slategray;
}

.box-holder {
  width: 400px;
  height: 300px;
  position: relative;
  margin: 30px;
}

.cap {
  position: relative;
  height: 10%;
  width: 100%;
}

.middle {
  background-color: #000;
  position: absolute;
  left: 7.5%;
  width: 85%;
  height: 100%;
  z-index: 1;
}

.cap .middle:before {
  content: "";
  display: block;
  background-color: #fff;
  height: 7px;
  width: 103%;
  position: absolute;
  left: -1.5%;
}

.content {
  width: 100%;
  height: 80%;
  background-color: #000;
  position: relative;
  z-index: 1;
}

.content:before {
  content: "";
  display: block;
  height: 104%;
  width: 7px;
  background-color: #fff;
  position: absolute;
  top: -2%;
  left: 0;
}

.content:after {
  content: "";
  display: block;
  height: 104%;
  width: 7px;
  background-color: #fff;
  position: absolute;
  top: -2%;
  right: 0;
}

.top-cap .middle:before {
  top: 0;
}

.bottom-cap .middle:before {
  bottom: 0;
}

.corner {
  width: 7.5%;
  height: 100%;
  overflow: hidden;
  position: absolute;
}

.corner:before {
  content: "";
  display: block;
  width: 130%;
  height: 130%;
  position: absolute;
  border-radius: 0;
  border: 30px solid #000;
}

.corner:after {
  content: "";
  display: block;
  width: 117.5%;
  height: 117.5%;
  position: absolute;
  border-radius: 0;
  border: 7px solid #fff;
}

.top-cap .corner-left {
  top: 0;
  left: 0;
}

.top-cap .corner-left:before {
  top: -150%;
  left: -150%;
}

.top-cap .corner-left:after {
  top: -75%;
  left: -75%;
}

.top-cap .corner-right {
  top: 0;
  right: 0;
}

.top-cap .corner-right:before {
  top: -150%;
  right: -150%;
}

.top-cap .corner-right:after {
  top: -75%;
  right: -75%;
}

.bottom-cap .corner-left {
  bottom: 0;
  left: 0;
}

.bottom-cap .corner-left:before {
  bottom: -150%;
  left: -150%;
}

.bottom-cap .corner-left:after {
  bottom: -75%;
  left: -75%;
}

.bottom-cap .corner-right {
  bottom: 0;
  right: 0;
}

.bottom-cap .corner-right:before {
  bottom: -150%;
  right: -150%;
}

.bottom-cap .corner-right:after {
  bottom: -75%;
  right: -75%;
}

Is it possible to make this geometric figure in css and html?

1 Answers