Css: Is It Possible To Make An Element Look Like A Sine/cosine Function?

On my page I want elements that will serve as horizontal 'breaks' in the same way as hr elements, but I would like them to be shaped like a sine function. Is that possible? If so,

Solution 1:

Challenge accepted.

.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: 20px20px00;
	transform: translate(-20px, 0) scale(2,1);
}
.sine_span_second {
	border-top: none;
	border-radius: 0020px20px;
	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
<divclass="sine"><spanclass="sine_span sine_span_first"></span><spanclass="sine_span sine_span_second"></span></div><br />
Sharp curve
<divclass="sine"><spanclass="sine_span sine_span_first sine_span_first_2"></span><spanclass="sine_span sine_span_second sine_span_second_2"></span></div>

Btw, shouldn't you use some gif image for this?

Solution 2:

You could draw that sine function in 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

Or you could just use an SVG image like Paulie_D suggested.

Solution 3:

As @Paulie_D said don't over think it.

Be semantic and use a HR, give it a height and a background image.

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

eg.

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

note: background-size is not supported in older versions of IE but I only used it for convenience.