Question

有没有办法创建一个翘曲，弯曲，弯曲，变形等的 div ，看起来像下图？我唯一能找到的就是使用border-radius操作单个边框，但我真正需要的是仅使用CSS转换实际的div元素。

（编辑：正如评论指出的那样：是的吨解决方案使用边框，绘制到画布等等。但这个问题具体是关于操纵使用 CSS ）

的 div 元素

The unanswered Reddit thread where I got the image from.

Answer 1

我偶然发现了an interesting article in CSS Tricks。我不认为有一种方法可以用复杂的div做你想做的事，但如果你只是想要横幅文字。这是不一个完美的答案，但我认为它是你可能得到的最接近的答案。它实际上只是一个被操纵的div的错觉，而不是实际的东西。

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

＆＃13;

.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);
}

＆＃13;

<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>

＆＃13;

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

正如其他人在评论中所说的那样（虽然它不是你要求的）。 SVG很可能会做得更好。

Answer 2

.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>

仅使用CSS创建弯曲div

2 个答案: