如何制作一个标题栏折叠在网页上css

有人可以告诉我的CSS代码或指向我一个关于如何实现这种效果的教程看到所有的时间。以下是我在谈论的形象：如何制作一个标题栏折叠在网页上css

enter image description here

注：我知道如何与绝对我只需要知道他们是怎么拉的效果关闭定位。

2012-12-19 John Floyd

这是一个关于定位或有关“色带旗帜效应”的问题？ – PeeHaa

如果色带是问题，然后使用边界空（0尺寸）元素（您可以与: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/

来源

2012-12-19 20:07:17

谢谢加比，这是完美的，你可以给我一个左边的例子。 –

@JohnFloyd，请参阅http://jsfiddle.net/gaby/zJPhy/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/

来源

2012-12-19 19:56:51 Sampson

如何制作一个标题栏折叠在网页上css

回答

相关问题