2011-12-13 117 views
3

我不知道是否有人可以告诉我,如果下图中显示的弯曲效果可能与CSS3。CSS3弯曲效果

enter image description here

如果是,我可以对如何实现它的一些建议,好吗?

+0

这是不是超级清楚,如果你是问如何使背景上的绿色曲线或图像如何沿着该曲线定位。这是什么? – Joonas

+0

对不起,我所指的曲线是图片的曲线而不是绿色背景 – sisko

+1

最简单的方法是将每一个绝对定位,如果你喜欢使用JavaScript,一个非常简单的脚本就能让你找到你想要的位置。 – maxp

回答

1

像这样的事情可以做:

http://jsfiddle.net/lollero/Bfwpz/

HTML:

<div id="boxWrap"> 
    <div class="box1"></div> 
    <div class="box2"></div> 
    <div class="box3"></div> 
    <div class="box4"></div> 
    <div class="box5"></div> 
</div> 

CSS:

#boxWrap { float: left;} 

#boxWrap div { 
    background: #e1e1e1; 
    border: 1px solid #999999; 
    width: 40px; 
    height: 50px; 
    float: left; 
    margin: 10px; 
    position: relative; 
} 

.box1 { top: 20px; } 
.box2 { top: -20px; } 
.box3 { top: -50px; } 
.box4 { top: -20px; } 
.box5 { top: 20px; }