Create figure in CSS

Question

_{(source: renemax.nl)}

I need to create a figure like this with CSS codes. The black could be completly covered with a background-image or a softer backgroundcolor with text (quotes) on it.

Is this possible to create with CSS? I can't find this figure with the css generators online.

Any tips appreciated.

Answer 1

.element {
  position: relative;
  background: #000;
  margin: 20px auto;
  padding: 20px;
  height: 300px;
  width: 200px;
  color: #fff;
}

.element:before,
.element:after,
.element .box:before,
.element .box:after{
  transform: rotate(-45deg);
  top: calc(50% - 50px);
  border-radius: 5px;
  position: absolute;
  background: #000;
  content: '';
  height: 100px;
  width: 100px;
  z-index: -1;
  left: 0;
}
.element:after,
.element .box.top:after,
.element .box.bottom:after {
  right: 0;
  left: auto;
}

.element .box.top:before,
.element .box.top:after {
  top: 0;
}

.element .box.bottom:before,
.element .box.bottom:after {
  top: auto;
  bottom: 0;
}

<div class="element">
  Content Goes Here....
  
  <div class="box top"></div>
  <div class="box bottom"></div>
</div>