CSS对角线与填充空间

Question

我正在建立一个网站，我希望有一个纯色的导航链接栏，然后向最右边我希望有一条对角线在一点点上方链接，然后有一个有限的高度（关闭水平），并在导航链接上方的凸起区域有一个搜索框。

我如何在css中创建对角线，然后是否可以在所述对角线的一侧填充纯色空间？

Answer 1

线下的纯色对角线......

<强> HTML

<div class="uguu"></div>

<强> CSS

.uguu {
    line-height:0;
    width:0;
    border-top:20px solid transparent;
    border-right:100px solid green;
}

小提琴：http://jsfiddle.net/83Wyy/

Answer 2

  

我如何进行 1在css中创建对角线，然后可以在所述对角线的一侧填充纯色空间 ？

简单的解决方案：不存在。

复杂的解决方案：有很多CSS，绝对定位，不关心IE（使用-moz-transform: rotate(45deg)），you can draw silly stuff。

See what some people can end up doing...

Personnaly，我会选择@a解决方案：使用背景图片。

如果你真的想“画画”，请使用dojo js框架，以SGV see this article为例。

Answer 3

要在背景中设置对角线，您需要创建背景图像。

您可以使用此网站创建条纹对角线背景：http://www.stripegenerator.com/

对于你正在做的事情，我建议你有两个独立的条纹背景。