html - 純粋な CSS のみを使用して編集アイコンのスタイルを設定するにはどうすればよいですか?

Question

純粋な CSS を使用して上記の画像をデザインしたいと考えています。

これまでのところ、編集アイコンなしでデザインすることしかできません。

以下は、これまでに思いついた HTML と CSS です。

<div>
    <img src="static\assets\images\avatar.jpg" class="main-profile-img" />
</div>

<style>
    .main-profile-img {
        width: 140px;
        height: 140px;
        border-radius: 50%;
        border-style: solid;
        border-color: #FFFFFF;
        box-shadow: 0 0 8px 3px #B8B8B8;
    }
</style>

右上の編集アイコンの HTML と CSS コードだけが必要です。

Answer 1

-- 簡易版 --

同じ鉛筆アイコンが必要で、境界線がなく、1 つの HTML タグが使用されていました。最終結果：

JSfiddle デモ: https://jsfiddle.net/allenski/tx0zyLr8/ (IE11 で動作)。

HTML コード:

<div class="edit-pencil"></div>

CSS コード:

.edit-pencil {
    position: relative;
    display: inline-block;
    width: 25px;
    height: 36px;
    vertical-align: middle;
    cursor: pointer;
}
.edit-pencil:before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-2px, -3px) rotate(-45deg);
    width: 3px;
    height: 5px;
    background-color: #7081a3;
    box-shadow: 1px 0px 0px #7081a3, 2px 0px 0px #7081a3, 3px 0px 0px #7081a3, -1px 0px 0px #7081a3, -2px 0px 0px #7081a3, -3px 0px 0px #7081a3, -3.3px 0px 0px #7081a3, 7px 0px 0px #7081a3;
    transition: all 300ms;
    content: '';
}
.edit-pencil:after {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-9px, 3px) rotate(-45deg);
    font-size: 1px;
    border: solid 3em transparent;
    border-left-width: 0;
    border-right-width: 5em;
    border-right-color: #7081a3;
    transition: all 300ms;
    content: '';
}
.edit-pencil:hover:before {
    background-color: #333333;
    box-shadow: 1px 0px 0px #333333, 2px 0px 0px #333333, 3px 0px 0px #333333, -1px 0px 0px #333333, -2px 0px 0px #333333, -3px 0px 0px #333333, -3.3px 0px 0px #333333, 7px 0px 0px #333333;
}
.edit-pencil:hover:after {
    border-right-color: #333333;
}