如何仅使用此 Div 创建此形状 [关闭]

【问题标题】：How I can Create this shape using This Div only [closed]如何仅使用此 Div 创建此形状 [关闭]
【发布时间】：2021-09-02 16:15:18
【问题描述】：

我想知道如何使用 css 在图片中创建这个形状，我创建了相同的但主 div 放在后面。

&lt;div&gt;Elzero&lt;/div&gt;

check this pic please

【问题讨论】：

带有两个伪元素。 :before, :after 绝对位置，负 z-index 与 transform: rotate(3deg)。你试过什么？

标签： html css rotation transform

【解决方案1】：

这样的？

body {
  margin: 1em;
  font-size: 4em;
}

div {
  background: #eee;
  border: .1em solid #ccc;
  color: #06a9f4;
  font-weight: bold;
  padding: 1.5em 0;
  position: relative;
  text-align: center;
}

div::before,
div::after {
  background: currentColor;
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -.1em;
  right: -.1em;
  z-index: -1;
  transform: rotate(-8deg);
}

div::after {
  background: #e92a63;
  transform: rotate(8deg);
}

&lt;div&gt;Elzero&lt;/div&gt;

【讨论】：