在 CSS 中创建图形

【问题标题】：Create figure in CSS在 CSS 中创建图形
【发布时间】：2019-10-05 21:26:16
【问题描述】：

_{（来源：renemax.nl）}

我需要用 CSS 代码创建一个这样的图形。黑色可以完全覆盖背景图像或带有文本（引号）的柔和背景色。

这可以用 CSS 创建吗？我在网上用 css 生成器找不到这个图。

感谢任何提示。

【问题讨论】：

这是一个非常精确的形状。您是否考虑过使用 SVG？
如果您可以使用图片，请查看tutorial
如果您需要用背景图片填充该图形，您只能使用 SVG 或 Canvas，而不是 CSS。
好的，谢谢。关于如何通过 SVG 做到这一点的任何好的教程或提示？

标签： html css css-shapes figure

【解决方案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>

【讨论】：