Create figure in CSS

Question

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.

That is a very precise shape. Have you considered using SVG? — Niet the Dark Absol, Jun 17 '16 at 10:26
If you could use images, check this [tutorial](http://www.w3schools.com/css/css3_border_images.asp) — Pugazh, Jun 17 '16 at 10:29
If you need to fill that figure with a background image, you only can do it with SVG or Canvas, not with CSS. — Marcos Pérez Gude, Jun 17 '16 at 10:32
Okay, thanks. Any good tutorial or tip on how I can do this by SVG ? — Jasper Renema, Jun 17 '16 at 10:47

score 3 · Accepted Answer · answered Jun 17 '16 at 10:48

.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>

Create figure in CSS

1 Answers1