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' 
}