使用边框的弯曲线条

Question

嗯，经过一番调查并寻找解决方案后，我已经实现了曲线。但它们并不像我想要的那样完美。

期望的效果是：

这是目前的效果：

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

以下是代码：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

这里是小提琴：http://jsfiddle.net/84t6w8ca/

必须可以为4个方向重建所需的效果。

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

我可以为较低版本的浏览器执行图像回退，因此不要担心IE8或更少

有没有人可以做到更好的解决方案呢？

编辑：

我希望有一个更圆润的角落效果，而不是那么圆..

我在考虑的是overflow:hidden方格，并将divs放在border-radius内，width和height更大。< / p>

我还应该警告你，这条线是动态的，取决于内容并绕过内容直到页面结束。此外，它有来自顶部和底部的线条。像这样：

编辑2：

在@ 0_o回答之后我尝试使用盒子阴影，但你可以注意到它有点模糊。

示例：

编辑3：

使用@NileshMahajan后，我实现了以下目标：

我现在不知道我的眼睛是否疯了，但这是我想要达到的最接近的目标。

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

请检查更新的小提琴。 https://jsfiddle.net/nileshmahaja/84t6w8ca/3/

我在整个html中添加了一个容器

<div class="container">
    <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>
</div>

还修改了你的css代码

.container{
    position:relative;
    width: 200px;
    height: 200px;
    overflow:hidden;
}
.left-corner-lines {
      width: 200px;
      left: 50%;
      height: 200px;
      position: relative;
      top:-50%
  }
  .left-round-line {
      border-radius:100%;
      border: 5px solid #fbbc56;
      position: absolute;
      left:0;
      right:0;
      top:0;
      bottom:0;
      margin:auto;
  }

  .left-round-line.yellow-round {
      height: 20px;
      width: 20px;
      border-color:#fbbc56;

  }

  .left-round-line.blue-round {
      height: 40px;
      width: 40px;
      border-color: #0090d0;
  }

  .left-round-line.purple-round {
      height: 60px;
      width: 60px;
      border-color: #915da3;
  }

  .left-round-line.pink-round {
      height: 80px;
      width: 80px;
      border-color: #cc5299;
  }

  .left-round-line.green-round {
      height: 100px;
      width: 100px;
      border-color: #bed140;
  }

Answer 3

如果你想要单色线，你只需要在SVG中使用一个路径元素即可。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="200" viewBox="4 5 30 30">
  <path d="M5 5 A 25 25 0 0 0 30 30 m0-5 A 20 20 0 0 1 10 5 m5 0 A 15 15 0 0 0 30 20 m0-5 A 10 10 0 0 1 20 5 m5 0 A 5 5 0 0 0 30 10" fill="none" stroke="black" stroke-width="2" />
</svg>

如果你想要不同颜色的片段，最好在这里使用圆形元素。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100" viewBox="0 0 30 30">
  <defs>
  	<style>
  		circle {cx:30; cy:0; stroke-width:2; fill:transparent;}
  	</style>
  </defs>
  <circle r="5" stroke="#fbbc56" />
  <circle r="10" stroke="#0090d0" />
  <circle r="15" stroke="#915da3" />
  <circle r="20" stroke="#cc5299" />
  <circle r="25" stroke="#bed140" />
</svg>

这里SVG的优点是：

• 简洁明了。

• 支持所有主流浏览器（和IE8 +）对于IE 8-，您可以使用VML作为后备（raphael是一个很好的JS库）

• 在所有主要浏览器上都没有模糊或锯齿（与渐变的情况一样）

• 差距可以是透明的，而不是白色或纯色。这也可以使用渐变来实现