CSS实现切线效果

Question

有人知道如何使用CSS创建这种线条吗？（参见图片）

- ThomasReggi

---

为什么这个问题被关闭了？ - tim peterson

Answer 1

这是一个粗略的近似开始。您需要调整具体内容。基本上，我创建了一个悬挂的div，在下面是一个div，将在两端呈现渐变阴影。悬挂的div位于更高的层级上，因此您只能看到阴影的边缘。

演示： http://jsfiddle.net/X5muV/

另一个，略微更暗： http://jsfiddle.net/X5muV/1/

HTML:

<div id="container">
    <div id="overhang"></div>
    <div id="falloff-shadow"></div>
</div>

CSS：

    #container { 
      background: #5A5A5A; 
      width: 700px; 
      padding: 200px 0 80px 0px;
   }
    #overhang { 
      background: #5A5A5A; 
      border-top: 1px solid #666; 
      height: 80px; 
      width: 600px; 
      margin: 0 auto; 
      position: relative; 
      z-index: 5;
    }
    #falloff-shadow { 
      width: 500px; 
      margin: 0 auto;
      -webkit-box-shadow: 0px 5px 50px 5px rgba(0, 0, 0, 1);
      -moz-box-shadow: 0px 5px 50px 5px rgba(0, 0, 0, 1);
      box-shadow: 0px 5px 50px 5px rgba(0, 0, 0, 1);
      position: relative;
      z-index: 1;
      height: 1px;
      top: -65px;
    }

- Chris Fletcher

---

谢谢！我正在尝试找出在两端获得阴影衰减的最佳方法。 - Chris Fletcher

这就是为什么，尽管我认为 CSS 不是一种语言，但我尊重它（并热爱它）。因为你可以用不同的路径达到相同的目标，每个路径都是独特而有创造性的。 - Yisela

+1，不错哦！我从来没想过你只用 CSS 就能让它看起来这么漂亮。 - ptriek

Answer 2

是的，您可以在CSS3中创建这个效果。您需要结合一些效果，但我认为一个带阴影的灰色线条（稍后将解释需要添加一些额外空间）就可以了。

要编写仅出现在一侧（顶部）的阴影，请查看此问题/答案：如何在元素的一侧添加盒子阴影？ 基于该示例，您可以尝试类似以下代码：

.myDiv
{
    width: 700px;
    height: 50px;
    border-top: 2px solid #333;
    -webkit-box-shadow: 10px 0px 0px -2px #888 ;
}

阴影仍然在左边，但是被隐藏了（-2px）。这给了你单一阴影的错觉。这只是一个起点，尝试不同的选项，如果有任何特定的问题，请回来。但首先要自己动手。

- Yisela