CSS：是否有可能让一个元素看起来像一个正弦/余弦函数？ [英] CSS: Is it possible to make an element look like a sine/cosine function?

问题描述

在我的页面上，我想要的元素将像 hr 元素一样用作水平中断，但我希望它们的形状像一个正弦函数。

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

以下是您完成的小提琴： http：// jsfiddle .net / pdov7u85 /

HTML：

  < p>以下是一些红色文字< / p> 
<！ -  id为someElement的某个元素将会在这里 - > 
< p>下面是一些蓝色文本，应该用红色文本和波浪线分开< / p> 
  

CSS：

  p：nth-​​type-type（1）
 {
 color：red; 
 
 
 #someElement 
 {
 
} 
 
p：类型（2）
 {
颜色：蓝色; 
} 
  

解决方案

接受挑战。

  .sine {text-align：center;}。sine_span {display：inline-block;余量：0;填充：0; height：20px;宽度：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（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）;}  

 平曲线< div class =sine > < span class =sine_span sine_span_first>< / span>< span class =sine_span sine_span_second>< / span>< / div>< br />尖锐曲线< div class =正弦> < 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，你不应该使用一些gif图像吗？
 
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, how? 

Here's a fiddle for you to complete: 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;
}

解决方案
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?

                        
这篇关于CSS：是否有可能让一个元素看起来像一个正弦/余弦函数？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！