cssのみで 「ソースファイル」 アイコンを作成してみました。微妙な感じになってしまいました・・・
ソース
html
<div class="source"></div>
css
/* 右 */ .source { font-size: 100px; position: relative; width: 0.6em; height: 0.6em; border-left: 0.1em solid #39a9d6; border-bottom: 0.1em solid #39a9d6; border-radius: 0.1em; -webkit-transform: rotate(45deg); transform: rotate(45deg); } /* 左 */ .source::before { content: ""; position: absolute; top: -0.4em; left: 0.3em; width: 0.6em; height: 0.6em; border-right: 0.1em solid #39a9d6; border-bottom: 0.1em solid #39a9d6; border-radius: 0.1em; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } /* ライン */ .source::after { content: ""; position: absolute; top: -0.45em; left: 0.4em; width: 0.1em; height: 1.2em; background-color: #39a9d6; border-radius: 0.1em; -webkit-transform: rotate(-30deg); transform: rotate(-30deg); }