CSS向上功能区

Question

所以基本上我创建了一个导航栏（见下面），我想知道是否有可能创建一个向上的Ribbon类型的东西。

忽略导航的设计不好的休息，但我只是想右部，向上的色带。有没有可能这样做，最好是没有图像？我很好地与他们合作，但我更喜欢没有。

任何帮助将很乐意被赞赏，并提前感谢您。

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 */ 
}