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