【发布时间】：2015-04-17 19:41:32
【问题描述】：
好吧，经过一番调查并寻找解决方案，我已经实现了曲线。但它们并不像我想要的那样完美。
想要的效果是这样的：
这是目前的效果：
我想知道是否有人对此有更好的解决方案或任何可以达到预期效果的解决方案。
代码如下：
.left-corner-lines {
width: 252px;
float: left;
min-height: 40px;
position: relative;
}
.left-round-line {
border-radius: 0 0 0 100%;
border: 4px solid #fbbc56;
position: absolute;
top: 0;
right: -4px;
}
.left-round-line.yellow-round {
height: 12px;
width: 17px;
border-color: transparent transparent transparent #fbbc56;
}
.left-round-line.blue-round {
height: 21px;
width: 26px;
border-color: transparent transparent transparent #0090d0;
}
.left-round-line.purple-round {
height: 30px;
width: 35px;
border-color: transparent transparent transparent #915da3;
}
.left-round-line.pink-round {
height: 39px;
width: 44px;
border-color: transparent transparent transparent #cc5299;
}
.left-round-line.green-round {
height: 48px;
width: 53px;
border-color: transparent transparent transparent #bed140;
}
<div class="left-corner-lines">
<div class="left-round-line yellow-round"></div>
<div class="left-round-line blue-round"></div>
<div class="left-round-line purple-round"></div>
<div class="left-round-line pink-round"></div>
<div class="left-round-line green-round"></div>
</div>这是小提琴：http://jsfiddle.net/84t6w8ca/
必须可以为 4 个方向重新创建所需的效果。
但我现在只需要一个，因为我可以根据它重新创建其他的。
我可以为低版本浏览器做一个图像回退，所以不用担心IE8或更少
有没有人更好的解决方案可以实现它？
编辑：
我想要一个更圆角的效果，而不是那么圆..
我的想法是使用overflow:hidden 正方形，并将divs 放置在其中，并在width 和height 中固定border-radius 和更大。
我还应该警告您，该行是动态的，具体取决于内容，并且围绕内容直到页面末尾。此外，它有来自顶部和底部的线条。像这样：
编辑 2：
@0_o 回答后，我尝试使用 box-shadows，但您会注意到它有点模糊。
例子：
编辑 3：
使用@NileshMahajan 后，我实现了以下目标：
我不知道现在是不是我的眼睛快要发疯了，但这是我试图实现的最接近的目标。
【问题讨论】：
-
也许你可以多看看 svg 图片或背景。
-
嘿，乔尔，你说“但它们并不像我想要的那样完美”是什么意思。或者实际上你想要的效果是什么？更圆润？
-
我尝试改变宽度和高度。他们似乎更挤在一起。但我和@dbd 在一起，你到底需要什么？
-
如果你因为浏览器支持而不能使用svg，那么你也不能使用box shadows。
-
@JoelAlmeida：既然你说它是一个“旧”网站，我不确定这是否会对你有所帮助。但是，请尝试看看这里提到的径向渐变方法（父级和溢出隐藏）是否对您有帮助 - stackoverflow.com/questions/27730476/css-design-rainbow/…
标签： html css css-shapes