html – 使用边框的曲线

那么经过一番调查和寻找解决方案,我已经实现了曲线.但他们并不完美,因为我想要他们.

所期望的效果是这样的：

这是目前的效果：

我想知道有没有人能为这个或任何可以达到预期效果的解决方案提供更好的解决方案.

以下是代码：

.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或更少

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

编辑：

我想要一个更圆润的角落效果,而不是那么圆.

我正在想的是溢出：隐藏的方形,并将div放在其中,固定的边框半径和宽度和高度更大.

我也应该警告你,这行是根据内容动态的,围绕内容,直到页面结尾.此外,它有线从顶部和底部.喜欢这个：

编辑2：

之后@ 0_o回答我试图使用盒子阴影,但你可以注意到它有点模糊.

示例：

编辑3：

使用@NileshMahajan后,我已经实现了以下功能：

我不知道现在我的眼睛是否疯狂,但这是我最想达到的目标.

解决方法

请检查更新的小提琴. 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;
  }

html – 使用边框的曲线

解决方法

猜你在找的HTML相关文章