CSS：是否有可能使元素看起来像正弦/余弦函数？

在我的页面上，我想要的元素将以与hr元素相同的方式用作水平“中断”，但我希望它们的形状像正弦函数。CSS：是否有可能使元素看起来像正弦/余弦函数？

这可能吗？如果是这样，怎么样？

这里有一个小提琴为你完成：http://jsfiddle.net/pdov7u85/

HTML：

<p>Here's some red text</p> 
<!--some element with id someElement will go here--> 
<p>Here's some blue text, which should be divided from the red text with a wavy line</p>

CSS：

p:nth-of-type(1) 
{ 
    color: red; 
} 

#someElement 
{ 

} 

p:nth-of-type(2) 
{ 
    color: blue; 
}

来源

2014-10-26 Optimizer Oliver

我会用一个SVG，但那只是我。无需在此处过度隐藏 – 2014-10-26 17:28:53

您可以创建一个包含正弦或余弦函数周期的图像，并将其设置为元素的背景（如果需要，伪元素），并使其在x方向上重复。但你是否期望能够在CSS中创建一个正弦函数图？ – 2014-10-26 17:31:50

回到以前的岁月（比如1999年左右），人们曾经使用丑陋的GIF制作这种水平分页符。你为什么不那样做？ – 2014-10-26 17:42:39

你可以绘制正弦函数在javascript：

var canvas = document.getElementById("canvas"); 
if (canvas == null || !canvas.getContext) { 
    return; 
} 
var ctx = canvas.getContext("2d"); 
ctx.beginPath(); 
ctx.lineWidth = 1; 
ctx.strokeStyle = "rgb(11,153,11)"; 

for (var i = 0; i <= 1000; i++) { 

    var x = i * 5; 
    var y = Math.sin(5 * x + 1); 
    ctx.lineTo(0.5 + x, 25 - y * 24); 
} 
ctx.stroke();

JSFiddle

或者您可以使用像Paulie_D建议的SVG图像。

来源

2014-10-26 18:22:11 davidtrautmann

这是最酷的答案。 – chris 2014-10-26 18:39:56

但不使用CSS，似乎需要一个明确的宽度声明。 – chris 2014-10-26 18:48:44

接受挑战。

.sine { 
 
\t text-align: center; 
 
} 
 
.sine_span { 
 
\t display: inline-block; 
 
\t margin:0; 
 
\t padding:0; 
 
\t height: 20px; 
 
\t width: 40px; 
 
\t border: 1px solid black; 
 
} 
 
.sine_span_first { 
 
\t border-bottom: none; 
 
\t border-radius: 20px 20px 0 0; 
 
\t transform: translate(-20px, 0) scale(2,1); 
 
} 
 
.sine_span_second { 
 
\t border-top: none; 
 
\t border-radius: 0 0 20px 20px; 
 
\t transform: translate(20px, 20px) scale(2,1); 
 
} 
 
.sine_span_first_2 { 
 
    transform: translate(0, 20px) scale(1,2); 
 
} 
 
.sine_span_second_2 { 
 
    transform: translate(0, 60px) scale(1,2); 
 
}

Flat curve 
 
<div class="sine"> 
 
    <span class="sine_span sine_span_first"></span><span class="sine_span sine_span_second"></span> 
 
</div> 
 

 
<br /> 
 
Sharp curve 
 
<div class="sine"> 
 
    <span class="sine_span sine_span_first sine_span_first_2"></span><span class="sine_span sine_span_second sine_span_second_2"></span> 
 
</div>

顺便说一句，你不应该使用一些这方面的gif图片？

来源

2014-10-26 18:28:18

这不会产生正弦函数的图形。 – 2014-10-26 18:42:58

你可以玩弄缩放，让它看起来更像'正弦波'。我已经用另一个更新了我的例子，我希望你更喜欢它。 ;） – 2014-10-26 19:11:25

由于@Paulie_D说不要以为。

要语义化并使用HR，给它一个高度和背景图像。

hr{ 
    border:none; 
    height:82px; 
    background:url('http://i60.tinypic.com/df8y75.png'); 
    background-size:50%; 
    }

例如，

http://jsfiddle.net/pdov7u85/3/

注：背景大小不是在旧版本的IE浏览器的支持，但我只用它为了方便。

来源

2014-10-26 18:33:29 chris

CSS：是否有可能使元素看起来像正弦/余弦函数？

回答

相关问题