如何使标题栏折叠在网页css上

Question

有人可以告诉我CSS代码或指向我一直看到如何实现这种效果的教程。 这是我正在谈论的图像：

注意：我知道如何绝对定位我只需要知道他们如何解除效果。

Answer 1

如果功能区出现问题，请在空（ 0-size ）元素上使用边框（可以添加:after伪元素 ）..

<强> HTML

<div id="content">
    <div id="ribbon"></div>
</div>

<强> CSS

#content{
    background-color:#77c;
    width:300px;
    height:200px;
    position:relative;
}
#ribbon{
    position:absolute;
    width:80px;
    height:30px;
    right:-20px;
    top:50px;
    background-color:#999;
}
#ribbon:after{
    content:'';
    width:0;
    height:0;

    border-color: transparent transparent #666 #666;
    border-style:solid;
    border-width:5px 10px;

    position:absolute;
    right:0;
    top:-10px;
}

演示 http://jsfiddle.net/gaby/zJPhy/

Answer 2

这可以相对或绝对地定位 - 它可以以任何一种方式完成：

#item {
    position: relative;
    right: -10px; /* moves it 10px to the right */
}

或绝对：

#item {
    position: absolute:
    top: 20px; /* 20px from the top */
    right: -20px; /* 20px off the right edge */
}

请注意，绝对定位的元素将根据视口定位，如果它们没有定位的祖先。

折叠部分可以使用伪元素:before或:after上的边框来完成。

演示：http://jsfiddle.net/MaepP/2/