css - CSS：具有交叉标签和水平标签的 div

Question

我在这里看一个帖子，注意到快照有一个侧面标签栏和一个用于标记内容的底部水平栏。

如何使用 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'
}