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?

Answer 1

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%;
}

<div class="box-holder">
  <div class="top-cap cap">
    <div class="corner-left corner"></div>
    <div class="middle"></div>
    <div class="corner-right corner"></div>
  </div>
  <div class="content">
  </div>
  <div class="bottom-cap cap">
    <div class="corner-left corner"></div>
    <div class="middle"></div>
    <div class="corner-right corner"></div>
  </div>
</div>