CSS:带有交叉标签和水平标签的div

Question

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

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