如何像图像一样添加边框底部？

Question

我只想知道如何在容器底部添加边框，如下所示：

http://awesomescreenshot.com/0a551tq923

假设那里的边框是白色的，而容器在那之上。

我知道它需要一些小的CSS，但无法解决这个问题。

谢谢。

Answer 1

我创建了一个JSFiddle来展示您可以做的事情的示例。全部使用CSS。

我可以使用我提供的基本示例看到多种方法来实现这一点。

用于底部斜面的css：

#bottom {
    width: 0;
    height: 0;
    border-top: 20px solid black;
    border-left: 500px solid transparent;
}

修改

这是另一个example。更接近网站。

此外website正在使用视差。所以它会和我扔在一起的东西有点不同。

Answer 2

你可以这样做：

#container {
  background:url('path to image which needed as border') no-repeat center bottom;
}

Answer 3

使用CSS3，您可以使用您喜欢的图像，尝试使用：

#container {
   border-radius: 10px 10px 10px 10px; 
   -moz-border-radius: 10px; /* firefox */
   -webkit-border-radius: 10px; /* safari, chrome */
}

如果你想要阴影试试：

-webkit-box-shadow: 0 5px 10px #303030;