在 CSS 中创建图形

Question

_{（来源：renemax.nl）}

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

这可以用 CSS 创建吗？我无法在 css 在线生成器上找到这个数字。

感谢任何提示。

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>

在 CSS 中创建图形

Create figure in CSS

html

css

figure

css-shapes