仅使用 CSS 创建弯曲的 div

Question

有什么方法可以创建一个像下图这样扭曲、弯曲、弯曲、变形等的div吗？我唯一能找到的是使用 border-radius 操作单个边框，但我真正需要的是仅使用 CSS 转换实际的 div 元素。

（编辑：正如评论所指出的：是的，有大量的解决方案使用边框、绘制到画布等。但是这个问题专门关于使用CSS操作div元素）

我从中获取图像的未答复的 Reddit 线程。

Answer 1

我在 CSS Tricks 中偶然发现了一篇有趣的文章。我认为没有办法用复杂的 div 来做你想做的事情，但如果你只想要横幅文本。这不是一个完美的答案，但我认为这是您可能得到的最接近的答案。这实际上只是一个被操纵的 div 的幻象，而不是实际的东西。

但无论如何......我设法调整他们的代码有点像这样：

.badge {
  position: relative;
  width: 400px;
  border-radius: 50%;
  transform: rotate(-50deg);
}

h1 span {
background-color: lightblue;
  font: 26px Monaco, MonoSpace;
  height: 40px;
  position: absolute;
  width: 20px;
  left: 0;
  top: 0;
  transform-origin: center 190px;
}

.char1 {
  transform: rotate(6deg);
}

.char2 {
  transform: rotate(12deg);
}

.char3 {
  transform: rotate(18deg);
}

.char4 {
  transform: rotate(24deg);
}

.char5 {
  transform: rotate(30deg);
}

.char6 {
  transform: rotate(36deg);
}

.char7 {
  transform: rotate(42deg);
}

.char8 {
  transform: rotate(48deg);
}

.char9 {
  transform: rotate(54deg);
}

.char10 {
  transform: rotate(60deg);
}

.char11 {
  transform: rotate(66deg);
}

.char12 {
  transform: rotate(72deg);
}

.char13 {
  transform: rotate(78deg);
}

.char14 {
  transform: rotate(84deg);
}

.char15 {
  transform: rotate(90deg);
}

.char16 {
  transform: rotate(96deg);
}

.char17 {
  transform: rotate(102deg);
}

.char18 {
  transform: rotate(108deg);
}

.char19 {
  transform: rotate(114deg);
}

.char20 {
  transform: rotate(120deg);
}

.char21 {
  transform: rotate(126deg);
}

.char22 {
  transform: rotate(132deg);
}

.char23 {
  transform: rotate(138deg);
}

.char24 {
  transform: rotate(144deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="page-wrap">
		
		<div class="badge">
		  <h1>
        <span class="char1">E</span>
        <span class="char2">s</span>
        <span class="char3">t</span>
        <span class="char4">a</span>
        <span class="char5">b</span>
        <span class="char6">l</span>
        <span class="char7">i</span>
        <span class="char8">s</span>
        <span class="char9">h</span>
        <span class="char10">e</span>
        <span class="char11">d</span>
        <span class="char12"> </span>
        <span class="char13">2</span>
        <span class="char14">0</span>
        <span class="char15">1</span>
        <span class="char16">2</span>
      </h1>
		</div>
	
	</div>

您必须将单词拆分为<span>具有特定类名称的单独字母元素。这很乏味，但文章提供了一些 javascript 来简化单词的分解，但你说只有 CSS，所以......

正如其他人在评论中所说的那样（尽管这不是您所要求的）。SVG 可能会更好地实现这一点。