使用唯一的CSS创建曲线格

有没有什么办法可以创建一个div这是扭曲，弯曲，弯曲，转换等，看起来像下面的图像？我唯一能够找到的是使用边界半径来操作单个边界，但我真正需要的是只用CSS来转换实际的div元素。使用唯一的CSS创建曲线格

（编辑：正如评论所指出的那样：是有吨使用边界解决方案，画到画布等，但这个问题是专门关于操纵使用CSS一个DIV元素）

The unanswered Reddit thread where I got the image from.

来源

2017-08-11 mintychai

你有你尝试过分享任何代码被downvoted或关闭？ –

这个问题的一般答案对于任何人使用都是很好的参考。但仅仅作为一个奖励，我正在试图创建一个带有圆角的粗曲线（所以想象带有圆角的图像的div）。找不到一个好的解决方案，不是不可靠和不可扩展的）： – mintychai

@GCyrillus The Reddit线程？这实际上并不是我的，只是一个线索，我发现我有同样的问题。 – mintychai

我碰到绊倒。我不认为有办法用复杂的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"> 
 
\t \t 
 
\t \t <div class="badge"> 
 
\t \t <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> 
 
\t \t </div> 
 
\t 
 
\t </div>

你必须字分成独立的信<span>元素与特定的类名。这是乏味的，但文章给出了一些JavaScript来简化分词的话，但你说只有CSS，所以...

正如别人在评论中所说（尽管这不是你所要求的）。 SVG可能会做得更好。

来源

2017-08-11 18:59:59 Don

谢谢！特别是对于实际回答问题 - “不”，可能不可能做到问题中提出的问题。这绝对是一个有趣的技巧，但我正在搞乱它，以便让几何体都能解决我正在做的事情。对于任何碰到这种情况的人来说：基本上你必须创建包装并将你想要的内容转换成div，这样它才能在div中弯曲。 – mintychai

正确地使用'transform-origin'你可以得到一些有趣的结果。 – Don

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

来源

2017-08-11 19:13:58 Muhammad

使用唯一的CSS创建曲线格

回答

相关问题