Question

I was looking at a post here and noticed that the snapshots have a side label bar and a botton horizontal bar for labeling contents.

How can this be achieved using CSS?

Update: I am talking about the cross-bar in the first image that says “snapshot” and “WP Advanced Code Editor”!

Answer 1

Try this – 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
}