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
}