html - 使用边框的曲线

Question

好吧，经过一些调查和寻找解决方案后，我得到了曲线。但它们并不像我想要的那样完美。

想要的效果是这样的:

这是当前的效果:

我想知道是否有人对此有更好的解决方案或任何可以达到预期效果的解决方案。

代码如下:

.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>

这是 fiddle :http://jsfiddle.net/84t6w8ca/

必须能够在 4 个可能的方向上重新创建所需的效果。

但我现在只需要一个，因为我可以基于它重新创建其他的。

我可以为较低版本的浏览器做图片回退，所以不用担心 IE8 或更低版本

有没有人有更好的解决方案可以实现它？

编辑:

我想要更圆润的 Angular 效果而不是那么圆..

我的想法是使用 overflow:hidden 正方形，并将 divs 放置在其中，固定 border-radius 并且更大宽度 和高度。

我还应该警告您，该行是动态的，具体取决于内容并围绕内容直到页面末尾。此外，它还有来自顶部和底部的线条。像这样:

编辑 2:

@0_o 回答后，我尝试使用框阴影，但您会注意到它有点模糊。

示例:

编辑 3:

使用@NileshMahajan 后，我取得了以下成就:

我不知道现在是不是我的眼睛发疯了，但这是我最接近的目标。

Answer 1

你也可以使用 box-shadow 来实现这一点

.left-corner-lines {
  width: 100px;
  height: 100px;
  position: relative;
  overflow: hidden;
}
.left-corner-lines:after {
  content: '';
  width: 30px;
  height: 30px;
  right: 0;
  margin: -15px -15px 0 0;
  border-radius: 50%;
  position: absolute;
  box-shadow: 0px 0px 0px 5px #fbbc56, 0px 0px 0px 10px #fff, 0px 0px 0px 15px #0090d0, 0px 0px 0px 20px #fff, 0px 0px 0px 25px #915da3, 0px 0px 0px 30px #fff, 0px 0px 0px 35px #cc5299;
}

<div class="left-corner-lines"></div>