要素1つで「返信済」アイコンを作る（封筒の上に矢印）

むやみに要素を増やさず、疑似要素などを利用して 1 つの span 要素でアイコンを作ろうというネタ。

HTMLはこれだけ

<span class="replied"></span>

JSFiddle のデモ

完成形：

封筒本体は普通に角の丸い四角形を作るだけです。

本体部分

/* 封筒の本体 */
.replied
{
    display: inline-block;
    background: #999;
    border-radius: 4px;
    width: 100px;
    height: 60px;
    /* 疑似要素の配置起点にさせる */
    position: relative;
}

蓋の部分の線は 1 つの疑似要素（ここでは :before 疑似要素）を使って border で描いています。
ポイントとして、普通に回転させるだけだと 2 本の線が垂直に交わってしまうので translate: skew(30deg) で斜めに歪めています。

蓋(？)の線の部分

/* 封筒の蓋 */
.replied:before
{
    content: '';
    display: inline-block;
    /* skew で歪ませているため width と height は同じ値にはならない */
    width: 60px;
    height: 46px;
    position: absolute;
    top: -10px;
    /* 左右中央寄せ */
    left: 0;
    right: 0;
    margin: 0 auto;
    /* 2本だけ線を引く */
    border-style: none none solid solid;
    border-color: #FFF;
    border-width: 8px;
    /* 回転させる ＆ 角度が45度だと封筒っぽくならないので歪ませて角度を変える */
    transform: rotate(-27deg) skew(30deg);   
}

ここまででこんな感じ：

さて、あと残り使える疑似要素は 1 つ。:after 疑似要素だけです。
どうやって矢印を作ろう？

ちなみに三角形を描くのは定番で、border を利用して描くことができます。

• CSSで作図する
• CSSで図形を描く仕組み

とりあえず三角形をつけるとこんな感じ：

ただ、残りの矢印のお尻（？）である四角形を描くための要素が足りません。
そこで使えるのが box-shadow です。

box-shadow の本来の目的はその名の通り影を落とすことですが、ボカし度合と位置、さらにはサイズまで調整可能なためボケていない影の位置とサイズを調整することで任意の四角形を配置することができます（しかも複数個可能！）。

ということでこれをうまく利用してやれば冒頭の完成形のようになります。

矢印部分

/* 返信の矢印 */
.replied:after
{
    content: ' ';
    display: inline-block;
    position: absolute;
    top: 18px;
    left: 86px;
    /* border を使って三角形を書く(定石) */
    background: transparent;
    width: 1px;
    height: 1px;
    border-style: solid;
    border-color: transparent transparent transparent #4060F0;
    border-width: 20px;
    /* ここがミソ。box-shadow を使って四角形を追加する */
    box-shadow: -26px 0 /* <- 位置指定 */ 0 -10px /* <- 要素本体より小さくする */ #4060F0;
}

完成：