html - 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(我已经在/*注释*/中解释了我是如何得到所有数字的)

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