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：是否有可能使元素看起來像正弦/餘弦函數？

回答

相關問題