CSS向上功能区

Question

所以基本上我正在创建一个导航栏（如下所示），我想知道是否可以创建一个向上的带状类型。

忽略设计糟糕的导航部分，但我只想要正确的部分，即向上的功能区。是否可以这样做，最好没有图像？我很好地与他们合作，但我更喜欢它。

任何帮助都会很高兴得到赞赏，并提前感谢你。

Answer 1

尝试这样的事情。它是纯HTML和CSS，您可以更改条形和条带高度。

Fiddle

HTML

<div id='wrapper'>
    <div id='bar'>This is the bar</div>
    <div id='corner'><div id='ribbon'></div></div>
</div>

CSS（我已经解释了我如何得到/* comments */中的所有数字）

#bar {
    background-color: blue;
    color: white;
    width: 70%;
    float: left;
    height: 30px; /* bar height */
}
#corner {
    width: 0; 
    height: 0; 
    border-top: 30px solid blue; /* bar height */
    border-right: 30px solid transparent; /* bar height */
    float: left;
}
#ribbon {
    height: 10px; /* ribbon height */
    margin-top: -40px; /* bar height + ribbon height */
    background-color: green;
    width: 30px; /* bar height */
}
#wrapper {
    margin-top: 20px; /* ribbon height + 10px padding */
}