仅使用CSS创建曲线DIV

Question

有没有办法创建一个弯曲、扭曲、弯曲或变形的

，使其看起来像下面的图像？我唯一能找到的是使用border-radius操纵单个边框，但我真正需要的是只用CSS转换实际的

元素。

（编辑：正如评论所指出的：是的，有很多解决方案使用边框、绘制到画布等等。但这个问题特别涉及使用CSS操纵

元素）

- mintychai

---

你有之前被踩或关闭的代码想要分享吗？ - G-Cyrillus

一个通用的答案对于这个问题来说会是一个很好的参考，供任何人使用。但是只是额外补充一下：我特别想要创建一条粗的、弯曲的线，并且带有圆角（就像图像中的div带有圆角）。找不到一个既不繁琐又可扩展的好解决方案，真是郁闷啊 ): - mintychai

我不明白为什么这会被关闭...尽管没有代码，但解释得非常清楚...如果 @mintychai 从未接近过任何东西，我不认为代码会有帮助... - Don

在发布问题之前，你可以做的最好的事情就是尝试自己解决它，换句话说：https://stackoverflow.com/help/mcve，然后再提出问题。 - AGE

@mintychai 坦白地说，对于你的问题，答案是：你应该使用SVG元素来完成。其他任何方法都只能是近似/欺骗。 - TylerH

Answer 1

.ribbon{
  width: 200px;
  height: 200px;
  border-left: 70px solid transparent;
  border-right: 70px solid transparent;
  border-top: 100px solid #d69688;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}

<div class='ribbon'></div>

- Muhammad

Answer 2

我在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可能会更好地完成这个任务。

- Don

---

谢谢！特别感谢您实际回答了这个问题——“不”，很可能无法完成所要求的操作。但这绝对是一个有趣的技巧，我正在尝试将几何图形调整到适合我的需求。对于任何偶然发现这篇文章的人：你基本上需要创建包装器并转换你想要放在 div 中的内容，以便它看起来像是在 div 中弯曲。 - mintychai

通过精确调整 transform-origin，你可以获得一些有趣的效果。 - Don