[英]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. 在我的页面上,我希望元素可以像
hr
元素一样用作水平“中断”,但是我希望它们的形状像一个正弦函数。
Is that possible? 那可能吗? If so, how?
如果是这样,怎么办?
Here's a fiddle for you to complete: http://jsfiddle.net/pdov7u85/ 这是您需要完成的小提琴: http : //jsfiddle.net/pdov7u85/
HTML: 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: CSS:
p:nth-of-type(1)
{
color: red;
}
#someElement
{
}
p:nth-of-type(2)
{
color: blue;
}
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: 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); }
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>
Btw, shouldn't you use some gif image for this? 顺便说一句,您不应该为此使用一些gif图像吗?
You could draw that sine function in javascript: 您可以在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();
Or you could just use an SVG image like Paulie_D suggested. 或者,您可以只使用像Paulie_D建议的SVG图像。
As @Paulie_D said don't over think it. 就像@Paulie_D所说的那样,不要过度思考。
Be semantic and use a HR, give it a height and a background image. 具有语义并使用HR,并为其指定高度和背景图片。
hr{
border:none;
height:82px;
background:url('http://i60.tinypic.com/df8y75.png');
background-size:50%;
}
eg. 例如。
http://jsfiddle.net/pdov7u85/3/ http://jsfiddle.net/pdov7u85/3/
note: background-size is not supported in older versions of IE but I only used it for convenience. 注意:IE的较早版本不支持background-size,但我仅出于方便起见使用它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.