Question

在我的页面上，我希望元素可以像hr元素一样用作水平“中断”，但我希望它们的形状像正弦函数。

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

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

Answer 1

接受了挑战。

＆＃13;

.sine { 
	text-align: center;
}
.sine_span {
	display: inline-block;
	margin:0;
	padding:0;
	height: 20px;
	width: 40px;
	border: 1px solid black;
}
.sine_span_first {
	border-bottom: none;
	border-radius: 20px 20px 0 0;
	transform: translate(-20px, 0) scale(2,1);
}
.sine_span_second {
	border-top: none;
	border-radius: 0 0 20px 20px;
	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);
}

＆＃13;

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>

＆＃13;

顺便说一下，你不应该使用一些gif图像吗？

Answer 2

你可以在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图像。

Answer 3

正如@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不支持background-size，但我只是为了方便而使用它。

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

3 个答案: