css - CSS: クロス ラベルと水平ラベルを使用した div

Question

ここの投稿を見ていて、スナップショットにはサイド ラベル バーと、コンテンツにラベルを付けるためのボタン水平バーがあることに気付きました。

CSSを使用してこれをどのように実現できますか?

更新: 「スナップショット」と「WP Advanced Code Editor」と書かれている最初の画像のクロスバーについて話しています!

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