本文介绍了CSS:是否有可能让一个元素看起来像一个正弦/余弦函数?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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



这可能吗?如果是这样,怎么样?

以下是您完成的小提琴:



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:是否有可能让一个元素看起来像一个正弦/余弦函数?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-18 13:59