CSS：帶有十字標籤和水平標籤的div

Question

我在看帖子here，注意到快照有一個側面標籤欄和一個用於標記內容的botton水平欄。

這怎麼能用CSS實現？

更新：我說的是第一個圖像中的「快照」和「WP高級代碼編輯器」中的交叉欄！

Answer 1

試試這個 - http://jsfiddle.net/hEeZA/

HTML

<div class="container"> 
    <span class="diag"> Some text </span> 
    <span class="horiz"> Some text </span> 
</div> 

CSS

div { 
    height: 300px; 
    width: 400px; 
    background: beige; 
    overflow: hidden; 
    position: relative; 
} 

span { 
    width: 200px; 
    display: inline-block; 
    height: 30px; 
    line-height: 30px; 
    color: #fff; 
    background: orange; 
    text-align: center; 
    position: absolute; 
} 

.horiz { 
    bottom: 40px; 
} 

.diag { 
    -webkit-transform:rotate(45deg); 
     -moz-transform:rotate(45deg); 
      transform:rotate(45deg); 

    right: -50px; 
    top: 30px 
} 

Answer 2

我的演示可以在這裏看到http://dabblet.com/gist/3152262

我有overflow:hidden圖像包裝，我已經只是使用了:before我旋轉並絕對定位的僞元素。水平的想法也一樣。

HTML

<a href="#" class="img-wrapper"> 
    <img src="img.jpg"> 
</a> 

CSS

.img-wrapper { 
    width: 400px; 
    height: 300px; 
    box-shadow: 1px 1px 3px #000; 
    display: block; 
    overflow: hidden; 
    position: relative; 
} 
.img-wrapper:before, .img-wrapper:after { 
    padding: .3em 2.9em; 
    position: absolute; 
    background: blue; 
    color: white; 
    font: 700 14px sans-serif; 
} 
.img-wrapper:before { 
    top: 35px; 
    right: -40px; 
    transform: rotate(45deg); 
    content: 'Screenshot'; 
} 
.img-wrapper:after { 
    top: 85%; 
    content: 'Developer Formatter' 
}